Webpack 5 - mini-css-extract-plugin 和 split-chunks-plugin 在樣式上產生沖突。css

Question

我正在將我的應用程序上的 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",

Answer 1

將文件名：'[name].js' 更改為文件名：“[name].[contenthash].js”

Answer 2

Webpack 也試圖將 CSS 文件拆分成塊，但是您的MiniCssExtractPlugin配置為 output 只有一個名稱filename: style.css 。 將其更改為filename: [name].css 。 不要忘記相應地更新您的 HTML 模板，因為您的根 CSS 文件名將會更改。