我正在将应用程序上的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
};
和打包。json:
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2"
"mini-css-extract-plugin": "^2.6.0",
1条答案
按热度按时间hfsqlsce1#
更改文件名:'[name]. js',更改为文件名:“[名称].[内容].js”