通过Webpack传递JS，CSS和图像

如何解决通过Webpack传递JS，CSS和图像

这篇文章的原因是，我找不到任何简单的解决方案或Webpack的多通道输出说明。

我想实现什么？

src/
    js/
        app.js (importing node modules)
        forms.js (referring to app.js and importing different forms' specific node modules)
        other javascripts:
        projects.js
        events.js and so on
    css/
        style.css (importing bootstrap and other libraries)
        forms.css
        other styles
    img/
        (images)

webroot/ (dev)
    js/
        app.js
        forms.js
        other javascripts
        projects.js
        events.js

    css/
        style.css
    img/
        (images)

webroot/ (prod)
    js/
        app.min.js
        forms.min.js
        other javascripts minified
        projects.min.js
        events.min.js
    css/
        style.min.css
    img/
        (images optimized)

我希望将js与css和图像（以及可能的sass文件和字体）分开。图片和字体可以简单地复制，但是JS需要编译和缩小，而CSS / SASS需要处理和缩小。

现在我有了这个，但是除了JS文件外，它什么也不能处理。

var config = {
    mode: 'development',module: {
        rules: [
            {
                test: /\.js$/,exclude: /node_modules/,use: {
                    loader: 'babel-loader',options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },{
                test: /\.s?css$/,use: [
                    MiniCssExtractPlugin.loader,// instead of style-loader
                    'css-loader',]
            }
        ]
    },plugins: [
        new CleanWebpackPlugin(),new webpack.ProvidePlugin({
            $: 'jquery',jQuery: 'jquery'
        }),new MiniCssExtractPlugin(),],};

    var jsConfig = Object.assign({},config,{
    entry: './js/app.js',output: {
        path: path.resolve(__dirname,'./../webroot/js'),filename: 'app.js'
    },});

    var cssConfig = Object.assign({},{
    entry: './css/style.css','./../webroot/css'),filename: 'style.css'
    },});

    module.exports = [
    jsConfig,cssConfig
    ];