webpack 压缩css代码

最新推荐文章于 2024-06-09 20:48:11 发布

平平无奇 > _ <

最新推荐文章于 2024-06-09 20:48:11 发布

阅读量93

点赞数 1

文章标签： webpack css 前端

本文链接： https://blog.csdn.net/weixin_53141315/article/details/132132422

版权

接上篇 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(),
        ],
      },
}