Webpack5文件压缩

时间：2025-02-07 13:00:18

文章目录

      • HTML压缩
      • CSS压缩
      • JS压缩
      • 常遇坑位介绍
        • 我们在配置插件的时候有的是配置在``中，有的是配置在`plugin`中，区别是什么？
        • 我们明明配置了``为true ，但是为什么还是没有被压缩（无效）

HTML压缩

HtmlWebpackPlugin` 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

同事HtmlWebpackplugin也支持html文本压缩，通过配置参数来达到各种压缩配置。

安装插件：

npm i -D html-webpack-plugin

基本用法：配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: '',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [
        new HtmlWebpackPlugin({
            scriptLoading: module,
            //本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)
            template: path.join(__dirname, 'default_index.ejs'),
            filename: '',//filename: ''
            hash: false,
            inject: true,
            compile: true,
            favicon: false,//添加特定favicon路径到输出的html文档中
            minify: false,//使用html压缩
            cache: true,//true|fasle, 默认true； 如果为true表示在对应的thunk文件修改后就会emit文件
            showErrors: true,
            chunks: 'all',//允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中
            excludeChunks: [],//这个与chunks配置项正好相反，用来配置不允许注入的thunk。
            title: 'Webpack App',生成的html文档的标题
            xhtml: false
        }),
    ],
};

CSS压缩

webpack5在配置css压缩依赖于两个插件：

  • mini-css-extract-plugin

    将css单独打包成一个文件的插件，它建立在新的 webpack v5 功能之上，需要 webpack 5 才能工作

  • css-minimizer-webpack-plugin

    这个插件使用 cssnano 优化和压缩 CSS。

安装插件：

npm i -D mini-css-extract-plugin
npm i -D css-minimizer-webpack-plugin

基本用法：

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

JS压缩

webpack4中内置了uglifyjs-webpack-plugin这个插件，在webpack5中则内置使用’terser-webpack-plugin’这个插件对代码进行压缩（本文主要介绍以webpack5为例）。

Webpack在生产模式默认开启这个插件，所以我们默认打包的js文件以及是压缩过的。当然我们也可以手动安装一下这个插件并且手动设置一个参数，去做一些并行压缩之类的事情；

基本用法：

在webpack5中，我们不需要手动安装terser-webpack-plugin，只需要配置optimization即可：

optimization: {
  minimize: true, // 可省略，默认最优配置：生产环境，压缩 true。开发环境，不压缩 false
  minimizer: [
      new TerserPlugin({
                test: /\.js(\?.*)?$/i,  //用来匹配需要压缩的文件。通常可以配置来过滤一些已经压缩过的js文件避免重复压缩导致问题
                include: undefined, //正则表达式，匹配参与压缩的文件。
                exclude: undefined //正则表达式，匹配不需要压缩的文件
                parallel: true, //使用多进程并发运行以提高构建速度。 并发运行的默认数量： ().length - 1 。
                minify: false, //允许你自定义压缩函数。 默认情况下，插件使用 terser 库。 对于使用和测试未发布的版本或 fork 的代码很帮助。

        terserOptions: {
              toplevel: true, // *别，删除无用代码
              ie8: true,
              safari10: true,
          }
      })
}

常遇坑位介绍

  1. 我们在配置插件的时候有的是配置在中，有的是配置在plugin中，区别是什么？

    配置在「plugins」中，webpack就会在启动时使用这个插件。而配置在 「」 中，就只会在「」这个特性开启时使用。所以webpack推荐，像压缩类的插件，应该配置在「」数组中。以便于通过「」统一控制。（生产环境会默认开启minimize）

  2. 我们明明配置了为true ，但是为什么还是没有被压缩（无效）

    原因是webpack认为，如果配置了minimizer，就表示开发者在自定以压缩插件，无论是配置minimizer是TRUE还是FALSE，内部的JS压缩器就会被覆盖掉。所以这里还需要手动将它添加回来。webpack内部使用的JS压缩器是「terser-webpack-plugin」。

    只有没有显示配置minimizer情况下，默认才是true压缩的。

相关文章