Question

以下是我的Webpack配置：

const path = require('path');
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = env => ({
    entry: './main.jsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: './'
    },
    mode: 'production',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
            test: [/\.js$|.jsx$/],
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['babel-preset-es2015', 'babel-preset-stage-2', 'babel-preset-react'],
            },
        },
        {
            test: /\.s?css$/,
            loader: 'style-loader!css-loader!sass-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        },
        {
            test: /\.(woff(2)?|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'icons/',
            },
        },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: './src/template.html'
      })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        watchContentBase: true,
        historyApiFallback: true,
        disableHostCheck: true,
    },
});

当我运行webpack并生成捆绑包时，它会从整个应用程序中提取CSS并将其放在头部。我正在使用SCSS，每个组件都有它自己的SCSS文件。下面是文件夹树：

这是我的React应用在浏览器中的样子：

我知道我在做一些愚蠢的事情，但不知道该怎么做。我该如何解决？任何帮助表示赞赏。我正在使用Webpack 4。

Answer 1

使用style-loader时会发生这种情况。它将css添加到头部。

您应该使用mini-css-extract-plugin来生成外部CSS文件。

Webpack整合了来自不同React组件的所有CSS

1 个答案: