webpack 压缩css代码

接上篇 webpack 将js中引入的css文件独立打包成css文件

https://blog.csdn.net/weixin_53141315/article/details/132131753?spm=1001.2014.3001.5501https://blog.csdn.net/weixin_53141315/article/details/132131753?spm=1001.2014.3001.5501

 同样打开webpack官网进行相关操作

链接：https://www.webpackjs.com/plugins/css-minimizer-webpack-plugin/

 

第一步：安装 css-minimizer-webpack-plugin 插件，在项目所在路径的终端下输入以下命令后回车等待安装

npm install css-minimizer-webpack-plugin --save-dev

 第二步：按照webpack官网修改webpack.config.js文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    entry:path.resolve(__dirname,'src/login.js'),
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'login/login.js',
        clean:true
    },
    plugins:[new HtmlWebpackPlugin({
        // 模板文件
        template:path.resolve(__dirname,'src/login.html'),
        // 输出文件
        filename:path.resolve(__dirname,'dist/login/login.html')
    }),
    new MiniCssExtractPlugin(),
    new MiniCssExtractPlugin()
  ],
    module: {
        rules: [
          {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, "css-loader"],
          },
        ],
      },
      optimization: {
        minimizer: [
          // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释 // `...`,
          new CssMinimizerPlugin(),
        ],
      },
}

 第三步：在项目所在路径的终端下输入npm run build后回车等待安装

此时打包后的main.css文件中引入login.css的代码也已经压缩，收工！！！