optimization: {
splitChunks: {
cacheGroups: {
// 2Css/Js
common: {
name: "common",
chunks: "all",
minChunks: 2, //
minSize: 0 // 30000
}
}
}
}
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../" // cssurl
}
},
"css-loader",
]
},
plugins: [
new CleanWebpackPlugin(["dist"])
new MiniCssExtractPlugin({
filename: "css/[name].css", // css
chunkFilename: "css/[name].css" // css
})
]
index.css and about.css are introduced into the index.js and about.js entrances, respectively.
index.css
@import "css-common.css";
.box-1{...}
about.css
@import "css-common.css";
.box-2{...}
three index.css,about.css,common.css files are generated by packaging< hr > < H2 > then replace all css with scss to load < / H2 >
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../"
}
},
"css-loader",
"sass-loader"
]
}
splitChunks and plugins remain unchanged, index.scss and about.scss are introduced in index.js and about.js respectively
index.scss
@import "css-common.scss";
box-1{...}
about.scss
@import "css-common.scss";
box-2{...}
only two files, index.css and about.css, are generated after packaging, common is not extracted, and both css contain duplicate css-common.scss< H2 > what"s going on with solving this? Thank you for your answers < / H2 >