14. 重学webpack——压缩JS、CSS和HTML及图片

推荐：《webpack学完这些就够了》

《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。

以下是本节正文：

压缩JS、CSS和HTML及图片

压缩js用terser-webpack-plugin，不在使用uglifyjs-webpack-plugin，因为前者支持ES6，后者不支持，所以现在都使用前者

压缩css用optimize-css-assets-webpack-plugin

1. 压缩js

• 压缩js用terser-webpack-plugin插件，可以优化和压缩JS资源

• 插件配置：

  module.exports = {
      ...
      optimization: {
          minimize: true,
          minimizer: [
              new TerserPlugin(),
          ],
      },
  }
  

• 为什么不使用uglifyjs-webpack-plugin？

  • 不在使用uglifyjs-webpack-plugin，因为前者支持ES6，后者不支持，所以现在都使用前者

2. 压缩css

• 压缩css用optimize-css-assets-webpack-plugin插件

• 插件配置：

  module.exports = {
      ...
      plugins: [
          ...
          new OptimizeCssAssetsWebpackPlugin(),
      ]
  }
  

3. 压缩html

• 压缩html在html-webpack-plugin中配置即可

• 插件配置：

  module.exports = {
      ...
      plugins: [
          new HtmlWebpackPlugin({
              template: './src/index.html',
              minify: { // 压缩html
                  collapseWhitespace: true,
                  removeComments: true
              }
          }),
      ]
  }
  

4.图片压缩

一般不太做图片压缩，压缩不太好控制图片质量

• 压缩可以使用image-webpack-loader， 帮助我们对图片进行压缩和优化
• 常用方式点击上方链接查看文档