Webpack 没有编译全局样式

Question

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

我的 webpack 配置：

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

好吧，我想通了。这是一个有趣的。所以，一些快速的背景知识：我努力的主要目标之一是在我们的构建配置中拥有强大的 tree-shaking。在我正在构建的 POC 中，我有两个项目：“主”项目，其中包含 webpack 配置，以及“子”项目，它是一个简单的 React 组件库。

为了让 tree shaking 尽可能正常工作，我相应地设置了每个配置设置。这包括在父项目和子项目的 package.json 中设置“sideEffects: false”。

事实证明，这是我的问题。这个设置告诉 webpack 它应该在摇树时删除它可能删除的所有内容。 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
            }