webpack4.0-css文件的代码分割-09

使用mini-css-extract-plugin插件对css文件进行代码分割

optimize-css-assets-webpack-plugin进行css文件压缩

在webpack.prod.js中进行配置

npm install --save-dev mini-css-extract-plugin

const merge = require('webpack-merge')
const commonConfig = require('./webpack.common.js')
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 抽离css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 对抽离的css进行压缩合并
const prodConfig = {
    mode:'production',
    devtool:'cheap-module-source-map',
    plugins:[
        new MiniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[name].chunk.css'
        })
    ],
    optimization:{ // 配置用于对抽离的css进行压缩合并
        minimizer:[new OptimizeCSSAssetsPlugin({})],
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader, 'css-loader'] // 抽离css
            },
            {
                test:/\.scss$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader'] // 抽离css
            }
        ]
    }
}

module.exports = merge(commonConfig, prodConfig)