Webpack之抽离压缩css

使用 mini-css-extract-plugin 插件的内置loader 替换 style-loader

使用 terser-webpack-plugin 插件压缩js代码

使用 optimize-css-assets-webpack-plugin 插件压缩css代码

 

const MiniCSSExtractPlugin = require('mini-css-extract-plugin');

const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); 

module.exports = {
    // ...
    module: {
        rules: [
            {
                 test: /\.css/,
                 loader: [
                     MiniCSSExtractPlugin.loader, // 替换 style-loader
                     'css-loader',
                     'postcss-loader',  // autoprefixer
                 ],
            }
        ]
    },
    plugins: [
        new MiniCSSExtractPlugin({
            filename: 'css/main.[contentHash:8].css'
        })
    ],
    optimization: {
        minimizer: {
             // 压缩js
             new TerserPlugin(),
             // 压缩css
             new OptimizeCssAssetsWebpackPlugin()
        }
    }   
}