Webpack 5 - mini-css-extract-plugin和split-chunks-plugin在styl

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:workspacemy-libmy-lib-uinode_moduleswebpacklibCompilation.js:4610:12
at C:workspacemy-libmy-lib-uinode_moduleswebpacklibCache.js:91:34
at Array.<anonymous> (C:workspacemy-libmy-lib-uinode_moduleswebpacklibcacheMemoryCachePlugin.js:45:13)
at C:workspacemy-libmy-lib-uinode_moduleswebpacklibCache.js:91:19
at Hook.eval [as callAsync] (eval at create (C:workspacemy-libmy-lib-uinode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:19:1)
at Cache.get (C:workspacemy-libmy-lib-uinode_moduleswebpacklibCache.js:75:18)
at ItemCacheFacade.get (C:workspacemy-libmy-lib-uinode_moduleswebpacklibCacheFacade.js:111:15)
at C:workspacemy-libmy-lib-uinode_moduleswebpacklibCompilation.js:4556:22
at arrayEach (C:workspacemy-libmy-lib-uinode_modulesneo-asyncasync.js:2405:9)
at Object.each (C:workspacemy-libmy-lib-uinode_modulesneo-asyncasync.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

将filename: '[name].js'更改为filename: "[name].[contenthash].js">

Answer 2

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