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
            }
        })
    ]
};

我不明白这里可能出什么问题。任何有想法的人，我将不胜感激。非常感谢。

PS。如果我注释掉CSS / SCSS模块的两个规则，那么全局样式将被很好地捆绑在一起，而模块样式将被忽略。也许这意味着什么？

Answer 1

好的，我知道了。这是一个有趣的。因此，请提供一些快速的背景知识：我努力的主要目标之一是在我们的构建配置中进行可靠的摇晃。在我正在构建的POC中，我有两个项目：具有webpack配置的“ main”项目和一个简单的React组件库“ child”项目。

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

Webpack没有编译全局样式

1 个答案: