css优化-mini-css-extract-plugin

将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    plugins: [
        new MiniCssExtractPlugin({//抽离css
            filename: "css/[name].css",//css打包后的名字
            chunkFilename: 'css/[id].css',//import 动态引入时  id没有配置引入名则以1 2 3 4 5 命名 import(/*webpackChunckName: a*/ './style.css')
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,//打包css文件
                    // 'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
        ]
    },