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

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

1 个答案: