Webpack——压缩css

压缩css

一、下载插件

命令行执行：cnpm i optimize-css-assets-webpack-plugin -D

二、配置webpack.config.js

webpack.config.js

/**
 * 压缩css
 * 使用插件：optimize-css-assets-webpack-plugin
 * 1、下载插件：cnpm i optimize-css-assets-webpack-plugin -D
 * 2、引入该插件
 * 3、在plugins中new该插件
 */
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入压缩插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 设置nodejs的环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
    // 模式
    mode: 'development',
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        // loader配置
        rules: [
            // css的loader
            {
                test: /\.css/,
                use: [
                    // 'style-loader', // 该loader的作用是创建一个style标签，将css插入标签中，因为我们要将css导入到文件中，所以不用这个loader
                    MiniCssExtractPlugin.loader, // 使用该loader将js中的css导入到文件中，并引入html文件
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                ident: 'postcss',
                                plugins: [['postcss-preset-env', {}]]
                            }
                        },
                    },
                ],
            },
        ],
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        // 使用miniCssExtractPlugin插件将css提取为一个文件
        new MiniCssExtractPlugin({
            // 对输出的文件重命名
            filename: 'css/built.css',
        }),
        // 调用压缩css插件
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    devServer: {
        static: resolve(__dirname, 'build'),
        port: 3000,
        compress: true,
        open: true,
    }
}