12. webpack4压缩css

1. 执行步骤

1）创建相关文件

 2）处理压缩相关依赖

直接下载optimize-css-assets-webpack-plugin插件，在plugins中使用就行

4.2 代码段

1）webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {

    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname,'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmpWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development'
}

2）a.css

#box1 {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: flex;
    backface-visibility: hidden;
}

3）b.css

#box2 {
    width: 200px;
    height: 200px;
    background-color: deeppink;
}

4）

import "../css/a.css";
import "../css/b.css"

执行webpack，查看打包输出后的built.css文件可以看到做了压缩处理