Javascript 通过网页包传送JS、CSS和图像

Javascript 通过网页包传送JS、CSS和图像,javascript,css,webpack,Javascript,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.

写这篇文章的原因是,我找不到任何简单的解决方案或解释多通道输出的网页

我想要实现什么

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)
我想从css和图像(以及可能的sass文件和字体)获得seprate js。图像和字体可以简单地复制,但是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({}, config, {
    entry: './css/style.css',
    output: {
        path: path.resolve(__dirname, './../webroot/css'),
        filename: 'style.css'
    },
    });

    module.exports = [
    jsConfig,
    cssConfig
    ];