Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks sass打包未遂
问题描述：单页单入口文件sass 文件内容没有被导入进打包后以的文件
类似 这个问题https://stackoverflow.com/questions/49410921/webpack-4-mini-css-extract-plugin-sass-loader-splitchunks
【解决办法】
原来在entry.js 中引入sass import "../demo.sass" 提出来，放在入口配置这块：
entry: [path.resolve(__dirname, 'assets/css/common.scss'),path.resolve(__dirname, 'assets/css/editor.scss'),path.resolve(__dirname, 'src/entry.js')],
项目环境
"webpack": 4.28.3",
"webpack-cli": "^3.2.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"mini-css-extract-plugin": "^0.5.0",
"extract-css-chunks-webpack-plugin": "^3.3.2",
node:11.6.0
配置如下：
module.exports = function(env, argv){
return {
target: 'web',
mode: 'production',
entry:path.resolve(__dirname, 'src/entry.js'),
output: {
path: path.resolve(__dirname, "dist"), // string
filename: "editor.full.min.js", // string
publicPath: "//xxxx/dist/", // string
chunkFilename: '[name].dll.js',
},
module: {
// 关于模块配置
rules: [
{
test:/\.css$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'//xxxxx/dist/'
}
},
'css-loader'
]
},
{
test: /\.(sa|sc)ss$/,
use: [
{
loader:ExtractCssChunks.loader,
options:{
publicPath:'//xxxxx/dist/'
}
},
{
loader: "css-loader",
options: {
importLoader: 1
}
},
"sass-loader" // compiles Sass to CSS
]
}
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css",
chunkFilename: "[name].chunk.css"
})
],
optimization:{
minimizer: [
new OptimizeCSSAssetsPlugin({})
],
splitChunks: {
chunks: "all",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all",
priority: -10
},
extern:{
test: /[\\/]extern[\\/]/,
name: "extern",
chunks: "all",
priority: -10
},
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
priority: -10,
enforce: true
},
sass: {
name: 'sass',
test: /\.(sa|sc|)ss$/,
chunks: 'all',
priority: -10,
enforce: true
},
default: {
minChunks: 1,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}
};