美好的一天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,但我可能会遗漏一些东西 .

非常感谢您的意见 .

谢谢 .