极客观点
研发管理
HarmonyOS
webpack1.0 直接升到 webpack5.0 各种依赖冲突，已经根据报错提示一个一个慢慢升级完了。在1.0的时候虽然很慢，但是能运行起来的，所以业务逻辑代码肯定是没问题么也动过。
现在升级完依赖，改完webpack配置 npm run start 项目启动报错如下：
根据chatGPT 和 文心一言的就解答就是“多个 chunk 尝试输出到相同的文件名” 造成的。如图：
在webpack配置文件中根据提示来回改，主要是改的 ：entry，output，optimization 三个配置项，但这个错误始终存在，区别就是下面的输出信息有时候长，有时候短，但开头都是这个错误
[webpack-dev-middleware] Error: Conflict: Multiple chunks emit assets to the same filename antdStyle.css (chunks 86171 and 70775)
附：
wenpack 配置如下：
/**
* 开发模式下的webpack配置
* 在整个项目开发过程中，几乎99%的时间都是在这个模式下进行的
* 注意。两种模式的配置有较大差异！！
*/
const path = require('path');
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
export default {
devtool: 'eval-source-map',
devServer: {//代理配置
//其实很简单的，只要配置这个参数就可以了
// proxy: {
// '/cosmo': {
// target: 'http://localhost:8887',
// secure: false
// }
// }
// headers:{
// 'Access-Control-Allow-Origin': '*',
// },
quiet:false,
noInfo: false,
},
// entry: [
// './src/webpack-public-path', // 服务器静态资源路径配置，保证首先载入
// 'react-hot-loader/patch',
// 'webpack-hot-middleware/client?reload=true',
// path.resolve(__dirname, 'src/js/index.js')
// ],
entry: {
main: [
'./src/webpack-public-path',
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/js/index.js')
]
},
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
// output: {
// path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`.
// publicPath: '/',
// filename: 'bundle.js',
// chunkFilename: '[name].bundle.js', // 使用[name]占位符为每个chunk指定独一无二的文件名
// library: `hce-[name]`,
// libraryTarget: 'umd',
// globalObject:'window'
// },
// output: {
// path: `${__dirname}/dist`, // 通常输出目录是 dist 而不是 src
// publicPath: '/',
// filename: (info) => {
// return `${info.chunk.id}-${info.chunk.name || 'main'}-[contenthash].bundle.js`;
// },
// chunkFilename: (info) => {
// return `${info.chunk.id}-${info.chunk.name || 'chunk'}-[contenthash].bundle.js`;
// },
// library: `hce-[name]`,
// libraryTarget: 'umd',
// globalObject: 'window'
//
// },
// output: {
// path: `${__dirname}/dist`,
// publicPath: '/',
// filename: 'bundle.js',
// chunkFilename: 'chunk-[id].js',
// library: `hce-[name]`,
// libraryTarget: 'umd',
// globalObject: 'window'
// },
output: {
path: `${__dirname}/dist`,
publicPath: '/',
filename: '[name]-[id].bundle.js',
chunkFilename: '[name]-[id].chunk.js',
library: `hce-[name]`,
libraryTarget: 'umd',
globalObject: 'window'
},
optimization: {
splitChunks: {
chunks: 'all',
name: 'common',
minSize: 20000, // 20KB
maxSize: 70000, // 70KB
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
automaticNameDelimiter: '~',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10, // 优先级，数字越小优先级越高
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunks: "",
title: 'MOM-开发模式',
favicon: './src/favicon.ico',
minify: {
removeComments: true,
collapseWhitespace: true
},
hash:true,
// 这样每次客户端页面就会根据这个hash来判断页面是否有必要刷新
// 在项目后续过程中，经常需要做些改动更新什么的，一但有改动，客户端页面就会自动更新！
inject: 'body'
}),
new MiniCssExtractPlugin({
filename: 'antdStyle.css', // 输出文件的名称
chunkFilename: '[name].css', // 非入口(non-entry) chunk 文件的名称
}),
],
resolve: {
modules: ['node_modules', path.join(__dirname, '../node_modules')],
extensions: ['.web.js', '.js', '.json'],
// 路径别名, 懒癌福音
alias:{
'@':path.resolve(__dirname,'src'),
app:path.resolve(__dirname,'src/js'),
// 以前你可能这样引用 import { Nav } from '../../components'
// 现在你可以这样引用 import { Nav } from 'app/components'
style:path.resolve(__dirname,'src/styles'),
// 以前你可能这样引用 import "../../../styles/mixins.scss"
// 现在你可以这样引用 import "style/mixins.scss"
// 注意：别名只能在.js文件中使用。
}
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
include: path.resolve(__dirname, 'src/js'),
use: [
'MiniCssExtractPlugin.loader',
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: '[local]___[hash:base64:5]'
}
},
'postcss-loader?parser=postcss-scss'
]
},
// 组件样式，需要私有化，单独配置
{
test: /\.scss$/,
include: path.resolve(__dirname, 'src/styles'),
use: [
'style-loader',
'css-loader',
'postcss-loader?parser=postcss-scss'
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: 'less-loader',
options: {
sourceMap: true,
lessOptions: {
modifyVars: {
"@icon-url": "'/fonts/iconfont'"
},
javascriptEnabled: true
}
}
}
]
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'node_modules'),
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('precss'),
require('autoprefixer'),
require('rucksack-css')
]
}
}
}
]
},
{
test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
use: 'url-loader?limit=10000'
},
{
test: /\.(gif|jpe?g|png|ico)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 小于这个大小的文件会被转为DataUrl
name: 'images/[name].[hash].[ext]', // 输出文件的命名规则
},
},
],
},
]
},
};
package.json 如下：
{
"name": "hce",
"version": "1.0.0",
"description": "react-base",
"main": "index.js",
"theme": {
"@icon-url": "'/fonts/iconfont'"
},
"scripts": {
"start": "npm-run-all --parallel open:src",
"open:src": "babel-node server.js",
"clean": "rimraf dist",
"build:webpack": "node --max-old-space-size=102400 ./node_modules/webpack/bin/webpack.js --config webpack-pro-config.js --progress --colors",
"build": "npm-run-all clean build:webpack"
},
"keywords": [
"react",
"es6",
"webpack"
],
"author": "minooo",
"license": "MIT",
"dependencies": {
"@antv/g2": "^3.5.3",
"antd": "^4.24.16",
"axios": "^0.19.2",
"babel-runtime": "^6.20.0",
"copy-to-clipboard": "^3.1.0",
"echarts": "^4.9.0",
"echarts-for-react": "^3.0.2",
"echarts-gl": "^1.1.2",
"echarts-wordcloud": "^1.1.3",
"ezuikit-js": "^0.7.0",
"fixed-data-table-2": "^0.8.13",
"handsontable": "^7.0.2",
"history": "^3.0.0",
"html2canvas": "^1.4.1",
"jquery": "^3.4.0",
"jspdf": "^1.5.3",
"moment": "^2.24.0",
"qrcodejs2": "0.0.2",
"react": "^17.0.2",
"react-cookie": "^1.0.4",
"react-dimensions": "^1.3.0",
"react-dom": "^17.0.2",
"react-dragula": "^1.1.17",
"react-free-scrollbar": "^0.3.4",
"react-handsontable": "^0.3.2",
"react-image-process": "^0.1.6",
"react-modal": "^3.3.2",
"react-piwik": "^1.6.0",
"react-router": "^3.0.0",
"react-slick": "^0.29.0",
"react-to-print": "^2.14.1",
"react-viewer": "^2.11.1",
"reflux": "^6.4.1",
"reqwest": "^2.0.5",
"slick-carousel": "^1.8.1",
"swiper": "^6.8.1",
"wangeditor": "^3.1.1",
"ztree": "^3.5.24"
},
"devDependencies": {
"@babel/core": "^7.25.7",
"@babel/node": "^7.25.7",
"@babel/plugin-transform-runtime": "^7.25.7",
"@babel/preset-env": "^7.25.7",
"@babel/preset-react": "^7.25.7",
"@babel/preset-stage-0": "^7.8.3",
"autoprefixer": "^6.4.0",
"babel-loader": "^9.2.1",
"babel-plugin-import": "^1.1.1",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"browser-sync": "^2.14.0",
"chokidar": "^1.6.1",
"classnames": "^2.2.5",
"connect-history-api-fallback": "^1.3.0",
"cross-env": "^2.0.0",
"css-loader": "^0.23.1",
"express": "^4.14.0",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^5.6.0",
"http-proxy-middleware": "^0.17.4",
"json-loader": "^0.5.4",
"less": "^4.2.0",
"less-loader": "^10.2.0",
"mini-css-extract-plugin": "^2.9.1",
"npm-run-all": "^2.3.0",
"postcss-loader": "^4.3.0",
"postcss-scss": "^0.1.9",
"precss": "^1.4.0",
"react-addons-css-transition-group": "^15.3.0",
"react-addons-perf": "^15.4.2",
"react-hot-loader": "^3.0.0-beta.6",
"react-router-dom": "^5.3.0",
"rimraf": "^2.5.3",
"rucksack-css": "^0.8.6",
"style-loader": "^0.13.2",
"url-loader": "^3.0.0",
"webpack": "^5.95.0",
"webpack-dev-middleware": "^5.3.4",
"webpack-hot-middleware": "^2.26.1"
}
}
错误分析
你的 Webpack 配置文件存在多个 chunk 输出到相同的
antdStyle.css文件导致冲突。主要是MiniCssExtractPlugin的配置问题。解决方案
1. 修改
MiniCssExtractPlugin的配置确保每个 CSS 文件有唯一的名称。修改插件配置文件名：
2. 修改
output配置使用占位符确保文件名唯一：
3. 确认 CSS 加载器配置
检查所有 CSS 处理规则，确保使用
MiniCssExtractPlugin：新的 Webpack 配置示例：
做了这些更改后，运行
npm run start，看看是否解决了冲突问题。