美好的一天webpack专家!
我是这个很棒的产品的新手,我想我可能会错误地考虑webpack,这可能会影响我正在努力构建的项目 .
我正在使用webpack 4.16.5并尝试完成非常简单的任务 - 将两个CSS文件捆绑成一个,最小化它并将其放入./dist/styles文件夹,我也放置一个.js文件 .
首先,我知道没有办法捆绑CSS,而不是首先在主JS文件中导入它,并在模块上使用mini-css-extract-plugin . 我这样做:
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader'
]
css的包被加载到/ dist文件夹中 . 然后我想将它复制到dist文件夹里面的styles文件夹中 . 我做
plugins: [
new CopyWebpackPlugin([
{ from: './src/style/style-default.js', to: './styles/style-default.js', toType: 'file' },
{ from: './dist/style-default.css', to: './styles/style-default.css', toType: 'file' }
]),
new MiniCssExtractPlugin({
filename: 'style-default.css'
})
],
它失败了,因为到插件运行时它无法找到捆绑的css文件,因为它尚未创建 .
我最终做了
plugins: [
new CopyWebpackPlugin([
{ from: './src/style/keyos-default.js', to: './styles/keyos-default.js', toType: 'file' },
{ from: './src/style/keyos-default.css', to: './styles/keyos-default.css', toType: 'file' },
{ from: './src/style/default-style.css', to: './styles/default-style.css', toType: 'file' }
])
],
而且,当然,这些文件没有最小化,无法找到一种方法来运行对webpack之前未通过输入或导入处理的文件的操作 .
我开始想知道我需要使用任务运行器webpack而不是webpack,但我可能会遗漏一些东西 .
非常感谢您的意见 .
谢谢 .