Webpack 5 - mini-css-extract-plugin 和 split-chunks-plugin 在 style.css 上产生冲突答案

【问题标题】：Webpack 5 - mini-css-extract-plugin and split-chunks-plugin produces conflict on style.cssWebpack 5 - mini-css-extract-plugin 和 split-chunks-plugin 在 style.css 上产生冲突
【发布时间】：2022-11-23 02:06:14
【问题描述】：

我正在将我的应用程序上的 webpack 从 v4 升级到 v5。我在npx webpack 收到此错误：

[webpack-cli] Error: Conflict: Multiple chunks emit assets to the same filename style.css (chunks app and vendor)
    at C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Compilation.js:4610:12
    at C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Cache.js:91:34
    at Array.<anonymous> (C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\cache\MemoryCachePlugin.js:45:13)
    at C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Cache.js:91:19
    at Hook.eval [as callAsync] (eval at create (C:\workspace\my-lib\my-lib-ui\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:19:1)
    at Cache.get (C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Cache.js:75:18)
    at ItemCacheFacade.get (C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\CacheFacade.js:111:15)
    at C:\workspace\my-lib\my-lib-ui\node_modules\webpack\lib\Compilation.js:4556:22
    at arrayEach (C:\workspace\my-lib\my-lib-ui\node_modules\neo-async\async.js:2405:9)
    at Object.each (C:\workspace\my-lib\my-lib-ui\node_modules\neo-async\async.js:2846:9)

我的 webpack.config.js：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')
const MODE = process.env.NODE_ENV || 'development';

module.exports = {
    entry: {
        app: path.join(__dirname, 'src/main/js/index')
    },
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            'react': path.resolve('./node_modules/react'),
            'react-dom': path.resolve('./node_modules/react-dom')
        }
    },
    output: {
        path: path.resolve(__dirname, 'target/classes/public'),
        filename: '[name].js',
        assetModuleFilename: '[name]-[hash:7][ext]',
        sourceMapFilename: '[name].js.map',
        chunkFilename: '[name]-[hash:7].js'
    },
    mode: MODE,
    module: {
        rules: [
            {
                test: /\.(js|jsx)?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        exclude: /node-modules/
                    }
                }
            },
            {
                test: /\.(css)$/,
                use: [
                    MiniCssExtractPlugin.loader, 'css-loader'
                ]
            },
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
                ]
            },
            {
                test: /\.(less)$/,
                use: [
                    MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            }
        ]
    },
    plugins: [
        new ESLintPlugin({extensions: ['js', 'jsx']}),
        new MiniCssExtractPlugin({
            filename: 'style.css'
        }),
        new CopyPlugin({
            patterns: [{from: path.join(__dirname, 'node_modules/core-js/client/shim.min.js'), to: 'shim.js'}],
        }),
    ],
    optimization: {
        chunkIds: 'named',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    filename: 'vendor.js',
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                },
                default: false
            }
        },
    },
    devtool: MODE === 'development' ? 'inline-source-map' : false
};

和 package.json：

    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
    "mini-css-extract-plugin": "^2.6.0",

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

将文件名：'[name].js' 更改为文件名：“[name].[contenthash].js”

【讨论】：

【解决方案2】：

Webpack 也在尝试将 CSS 文件拆分成块，但是您的 MiniCssExtractPlugin 配置为仅输出一个名称 filename: style.css。将其更改为 filename: [name].css。不要忘记相应地更新您的 HTML 模板，因为您的根 CSS 文件名将会更改。

【讨论】：