我想在webpack v5
生产模式下为chunkFileName
使用一个序列号,例如1.js, 2.js,...
。我设置了[index].js
来命名,但是webpack
给了我以下错误:
错误:冲突:多个块将资产发送到同一文件名[index].js(块179和216)
下面是我对webpack
的配置:
var config = {
devtool: 'eval-source-map',
cache: true,
entry: {
main: path.join(__dirname, "app", "App.js"),
},
output: {
path: path.join(__dirname, 'scripts', 'js'),
filename: '[name].js',
chunkFilename: '[name].js',
sourceMapFilename: '[file].map',
publicPath: '/scripts/js/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
babelrc: false,
presets: [
['es2015', { modules: false }],
'react',
],
plugins: [
'syntax-dynamic-import',
'transform-object-rest-spread',
'transform-class-properties',
'transform-object-assign',
],
}
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
'css-loader',
]
}
],
},
optimization: {
minimize: false,
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
},
}
},
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js)$|\.(css)$|\.(html)$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
//threshold: 10240,
//minRatio: 0
})
],
resolve: {
extensions: ['.js', '.jsx', '.css', '.ts'],
alias: {
'react-loadable': path.resolve(__dirname, 'app/app.js'),
},
},
};
if (process.env.NODE_ENV === 'production') {
const TerserPlugin = require("terser-webpack-plugin");
config.devtool = false;
config.output.chunkFilename = '[index].js';
config.optimization = {
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all",
}
},
}
},
config.plugins = [
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify('production') }
}),
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js)$|\.(css)$|\.(html)$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
//threshold: 10240,
//minRatio: 0
})
];
}
module.exports = config;
有人知道问题出在哪里吗?我很感激你能提供的任何帮助。
1条答案
按热度按时间bnl4lu3b1#
我找到答案了!可以设置
webpack's optimization
部分的配置,并为我们提供序列号为chunkFileName
和它的chunkIds
,应该设置为natural
。所以: