使用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