使用 Webpack 在生产环境中将资产拆分为捆绑包答案

【问题标题】：Split assets into bundles in Production with Webpack使用 Webpack 在生产环境中将资产拆分为捆绑包
【发布时间】：2019-11-18 05:30:27
【问题描述】：

我在几乎每个使用 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 提供服务时，我的 CSS 样式由 <style></style> 内联，并且还包含在 main.js 文件中。如何拆分 CSS、JS 和其他资源（bundle.css、bundle.js、img/image1.png 等）而不是内联 CSS 并将图像转换为 base64 格式？

【问题讨论】：

标签： node.js reactjs express webpack production

【解决方案1】：

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

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

【讨论】：