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"), // stringfilename: "editor.full.min.js", // stringpublicPath: "//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}}}}}
};