Webpack 5 - mini-css-extract-plugin 和 split-chunks-plugin 在样式上产生冲突。css

Question

I am upgrading webpack on my application from v4 to v5. I am receiving this error on 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)

My 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
};

and package.json:

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

Answer 1

change filename: '[name].js', to filename: "[name].[contenthash].js"

Answer 2

Webpack is trying to split CSS files into chunks as well, but your MiniCssExtractPlugin is configured to output only one name filename: style.css . Change that to filename: [name].css . Don't forget to update your HTML template accordingly, as your root CSS file name will change.