Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks sass打包未遂

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
                    }
                }
            }
        }


    }
};