Webpack 不编译全局样式

Question

我正在为我的公司开发一个新的 webpack 配置，以使我们能够使用最新的功能（Webpack 4 等），但我遇到了障碍。我需要这个 webpack 配置来支持 CSS 模块和全局 CSS 样式，因此我一直在尝试相应地配置我的加载器。我发现我的 CSS/SCSS 模块正在编译，但我的全局样式没有。

我的网络包配置：

const cssLoader = (useModules) => {
    const base = {
        loader: 'css-loader',
        options: {
            importLoaders: 5
        }
    };
    if (useModules) {
        base.options.modules = {
            localIdentName: '[name]__[local]__cssmod[hash:base64:5]'
        }
    }
    return base;
};

const postCssLoader = {
    loader: 'postcss-loader',
    options: {
        config: {
            path: path.resolve(__dirname, 'postcss.config.js')
        }
    }
};

const config = {
    mode: 'production',
    entry: path.resolve(__dirname, 'src'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js' // TODO we want a hash here
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: path.resolve(__dirname, 'src'),
                exclude: path.resolve(__dirname, 'node_modules'),
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/,
                exclude: /\.module\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    cssLoader(false),
                    postCssLoader,
                    'resolve-url-loader'
                ]
            },
            {
                test: /\.scss$/,
                exclude: /\.module\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    cssLoader(false),
                    postCssLoader,
                    'resolve-url-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.module\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    cssLoader(true),
                    postCssLoader,
                    'resolve-url-loader'
                ]
            },
            {
                test: /\.module\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    cssLoader(true),
                    postCssLoader,
                    'resolve-url-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    optimization: {
        usedExports: true
    },
    plugins: [
        new MiniCssExtractPlugin({
            disable: false,
            filename: 'app.css' // TODO we want a hash here
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'react-project',
            noScriptMessage: 'This requires JavaScript',
            inject: false,
            filename: 'index.html',
            template: path.resolve(__dirname, 'src/index-template.html'),
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true
            }
        })
    ]
};

我不明白这里可能出了什么问题。

附言。如果我注释掉 CSS/SCSS 模块的两条规则，则全局样式会很好地捆绑，而模块样式会被忽略。也许这意味着什么？

Answer 1

好吧，我想通了。这是一件有趣的事。所以，一些简单的背景知识：我努力的主要目标之一是在我们的构建配置中实现强大的树摇动。在我正在构建的 POC 中，我有两个项目：“主”项目（具有 webpack 配置）和“子”项目（一个简单的 React 组件库）。

为了使 Tree Shaking 尽可能发挥作用，我相应地设置了每个配置设置。这包括在父项目和子项目的 package.json 中设置“sideEffects: false”。

事实证明，这是我的问题。此设置告诉 webpack 它应该在 Tree Shaking 时删除所有可能删除的内容。Webpack 确定如果项目中根本没有使用某些东西，是否可以删除它。

导入为 的全局样式import './styles.css'不会直接链接到任何使用它的 React 代码。所以 webpack 将这些样式视为它可以丢弃的东西，因为我已经告诉它没有副作用。

为了避免这种情况，webpack 需要相信 CSS 文件有副作用。为此，可以将一个简单的属性添加到全局 CSS 文件的规则中：

{
                test: /\.scss$/,
                exclude: /\.module\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    cssLoader(false),
                    postCssLoader,
                    'resolve-url-loader',
                    'sass-loader'
                ],
                sideEffects: true
            }