Webpack 网页包不是'；t编译全局样式

因此，我正在为我的公司开发一个新的网页配置，让我们了解最新的功能（网页包4等），我遇到了一个障碍。我需要这个网页配置来支持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模块的两条规则，那么全局样式将很好地捆绑在一起，模块样式将被忽略。也许这意味着什么？

好吧，我明白了。这是一个有趣的例子。所以，简单介绍一下背景：我工作的主要目标之一是在构建配置中实现健壮的树抖动。在我正在构建的POC中，我有两个项目：“main”项目，它有webpack配置，和“child”项目，它是一个简单的React组件库

为了尽可能地使树震动工作，我相应地设置了每个配置设置。这包括在父项目和子项目的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
            }