webpack5 抽离css

在生产环境中如果使用style-loader将css代码嵌入到html文件中可能会发生意外，所以在生产环境下，需要对css代码进行抽离，抽离过后，html会已外链的形势引入css。开发环境可以依然使用style-loader。

一、依赖安装

mini-css-extract-plugin用于抽离css

optimize-css-assets-webpack-plugin用于压缩css文件

二、配置

在生产环境配置如下

// webpack.prod.js

const { merge } = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')

module.exports = merge(webpackCommonConf, {
     
    // ...

    module: {
        rules: [
            
            // ...
            
            // 抽离 css
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 抽离 less --> css
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    
    // ...
})

// webpack.prod.js

const { merge } = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')

module.exports = merge(webpackCommonConf, {
    
    // ...

    plugins: [ 
        // ...
        
        // 抽离 css 文件
        new MiniCssExtractPlugin({
            filename: 'css/main.[contenthash:8].css' // 文件输出路径
        })
    ],

    optimization: {
        // 压缩 css
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], // 前者压缩js， 后者压缩css
    }
})