使用Webpack将资产拆分为生产中的捆绑包

Question

我在React（或几乎所有其他框架）中制作的几乎每个生产网站上都看到，HTML网站中插入了分离的CSS和JS包。

我正在使用Webpack 4进行以下配置：

module.exports = {
    entry: "./src/client/index.js",
    output: {
        path: outputPath,
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }, {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        port: 3000,
        open: true,
        proxy: {
            '/api': 'http://localhost:8080'
        }
    },
    plugins: [
        new CleanWebpackPlugin([outputPath]),
        new HtmlWebPackPlugin({
            template: "./public/index.html"
        })
    ]
};

但是，当我构建前端并通过Express提供服务时， <style></style>会内联我的CSS样式，并且它们也会包含在main.js文件中。 如何将CSS，JS和其他资源（bundle.css，bundle.js，img / image1.png等）彼此分离，而不是内联CSS并将图像转换为base64格式？

Answer 1

要为CSS创建一个新文件，请删除style-loader并添加https://github.com/webpack-contrib/mini-css-extract-plugin

要对文件执行相同操作，请删除url-loader并将其替换为file-loader