今天把webpack版本從4.x升級到5.x，但是發現webpack 5.x沒有生成一些css檔案。這是我的 webpack 配置：
const path = require('path');
const webpack = require( 'webpack' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
entry : {
bg : './src/background-scripts/' ,
content : ['./src/content-scripts/firefox-fix.js', './src/content-scripts/'] ,
options : [
'./src/options/'
],
popup : './src/popup/' ,
'bs-lite' : './src/public/bootstrap-lite.scss'
} ,
output : {
path : path.resolve(__dirname, '../src/bundle') ,
filename : '[name].js'
} ,
module : {
rules : [
{
test : /\.js$/ ,
exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
loader : 'babel-loader'
} ,
{
test : /\.woff$/ ,
loader : 'file-loader' ,
options : {
name : '[name].[ext]'
}
} ,
{
test : /\.html$/ ,
loader : 'vue-html-loader'
} ,
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test : /\.(scss)$/ ,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
commons1: {
name: 'commons1',
chunks: 'all',
minChunks: 1,
test(module,chunks){
for (const chunk of module.chunksIterable) {
if (chunk.name && /(popup|content)/.test(chunk.name)) {
return true;
}
}
return false;
}
},
commons2: {
name: 'commons2',
chunks: 'all',
minChunks: 1,
test(module,chunks){
for (const chunk of module.chunksIterable) {
if (chunk.name && /(options|commons1)/.test(chunk.name)) {
return true;
}
}
return false;
}
},
commons3: {
name: 'commons3',
chunks: 'all',
minChunks: 1,
test(module,chunks){
for (const chunk of module.chunksIterable) {
if (chunk.name && /(bg|commons2)/.test(chunk.name)) {
return true;
}
}
return false;
}
},
}
}
},
plugins : [
new MiniCssExtractPlugin()
]
};
我正在使用 splitChunks 來拆分 js commons1.js common2.js common3.js，應該生成commons1.js.css檔案，但實際上并沒有生成。為什么webpack 5.x版本沒有生成css檔案？我應該怎么做才能使它生成css檔案？我試影像這樣調整配置：
new MiniCssExtractPlugin({
filename: 'commons1.js.css'
})
但它告訴我：
[webpack-cli] Error: Conflict: Multiple chunks emit assets to the same filename commons1.js.css (chunks content and options)
我應該怎么做才能處理這種情況？
uj5u.com熱心網友回復：
替換以下代碼：
new MiniCssExtractPlugin()
有了這個：
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[id].[contenthash].css",
}),
我希望這對你有用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418605.html
標籤：
上一篇：調整大小時元素向左移動