9种plugin

1. html-webpack-plugin

作用
- 在项目中的原 html 文件基础上，添加 script 标签引入 webpack 打包好的资源路径(就不用自己每次手动去改了)，生成新的 html 文件，输出到目标目录
- 还有更多选项可以优化原 html 文件
安装
```
npm i html-webpack-plugin -D
```

在 json 中配置

import HtmlWebpackPlugin from "html-webpack-plugin";

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/index.html"),
      minify: {
        collapseWhitespace: true,
        minifyJS: true,
        minifyCSS: true,
        removeComments: true,
        useShortDoctype: true,
      },
    }),
  ],
};

template 指定原文件路径，一旦指定后就不能用 title，favicon 等配置项

在 chain 中配置

import HtmlWebpackPlugin from "html-webpack-plugin";

config.plugin("HtmlWebpackPlugin").use(HtmlWebpackPlugin, [
  {
    template: path.resolve(__dirname, "./src/index.html"),
    minify: {
      collapseWhitespace: true,
      minifyJS: true,
      minifyCSS: true,
      removeComments: true,
      useShortDoctype: true,
    },
  },
]);

2. mini-css-extract-plugin

作用
- 提取 css 到单独的文件中
- 每个包含 css 的 JS 文件都创建一个 css 文件，因此支持 css 的按需加载
  - 这里的 JS 文件不是指组件对应的 JS 文件，是指打包后生成的 JS 文件
- 不可以和 style-loader 一起使用
安装
```
npm i mini-css-extract-plugin -D
```
注意
- 新版本要 webpack 5 才能使用，旧版也支持 4，webpack 4 之前用的是 extract-text-webpack-plugin

在 json 中配置

import MiniCssExtractPlugin from "mini-css-extract-plugin";

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    }
    plugin: [
        new MiniCssExtractPlugin({
            filename: "[name].[chunkhash].css",
            chunkFilename: "chunks/[name].[chunkhash].css"
        })
    ]
}

filename 代表打包后的入口 js 文件对应的 css 文件名字
chunkFilename 代表打包后的非入口 js 文件对应的 css 文件名字，可加 chunks 作为文件夹名

在 chain 中配置

import MiniCssExtractPlugin from "mini-css-extract-plugin";

config.plugin("MiniCssExtractPlugin").use(MiniCssExtractPlugin, [
  {
    filename: "[name].[chunkhash].css",
    chunkFilename: "chunks/[name].[chunkhash].css",
  },
]);

config.module
  .rule("css")
  .test(/\.css$/)
  .use("mini-css-loader")
  .loader(MiniCssExtractPlugin.loader)
  .end()
  .use("css-loader")
  .loader("css-loader")
  .end();

3. optimize-css-assets-webpack-plugin

作用
- 对 mini-css-extract-plugin 提取出来的样式进行压缩，同时还需要配合 cssnano 压缩器使用

安装

npm i optimize-css-assets-webpack-plugin -D

在 json 中配置

import OptimizeCSSAssetsPlugin from "optimize-css-assets-webpack-plugin";

module.exports = {
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        assetNameRegExp: /\.optimize\.css$/g,
        cssProcessor: require("cssnano"),
        cssProcessorOptions: {
          discardComments: {
            removeAll: true,
          },
        },
        canPrint: true,
      }),
    ],
  },
};

在 chain 中配置

import OptimizeCSSAssetsPlugin from "optimize-css-assets-webpack-plugin";

config.optimization.minimizer("css").use(OptimizeCSSAssetsPlugin, [
  {
    assetNameRegExp: /\.optimize\.css$/g,
    cssProcessor: require("cssnano"),
    cssProcessorOptions: {
      discardComments: {
        removeAll: true,
      },
    },
    canPrint: true,
  },
]);

4. terser-webpack-plugin

原理
- 在打包时对代码进行压缩，减少体积
- 比如移除空格换行、缩短变量名，同时还能起到混淆的作用
- 作用类似于以前用的 uglifyjs-webpack-plugin，但 terser-webpack-plugin 更先进，支持 ES6+代码的压缩
安装
```
npm i terser-webpack-plugin -D
```

在 json 中配置

import TerserPlugin from "terser-webpack-plugin";

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

minimize 为 true 代表人为设置开启
- 但如果已经在顶层写了 mode:production，就不需要人为设置
这里加入 minimizer，可以额外增加配置
- 比如配置了 compress 选项下的 drop_console，自动移除掉控制台打印的代码

在 chain 中配置

import TerserPlugin from "terser-webpack-plugin";

config.optimization.minimize(true);
config.optimization.minimizer("terser").use(TerserPlugin, [
  {
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  },
]);

5.compression-webpack-plugin

作用
- 在打包时，提前压缩出 gzip 文件，后端可以直接返回，不用临时压缩
- 需要配合后端 nginx 配置的gzip_static on使用
安装
```
npm i compression-webpack-plugin -D
```

在 json 中配置

import CompressionWebpackPlugin from "compression-webpack-plugin";

module.exports = {
  plugins: [
    new CompressionWebpackPlugin({
      algorithm: "gzip",
      test: /\.(js|css)(\?.*)?$/i,
      threshold: 10240,
      minRatio: 0.7,
      deleteOriginalAssets: false,
    }),
  ],
};

在 chain 中配置

import CompressionWebpackPlugin from "compression-webpack-plugin";

config.plugin("CompressionWebpackPlugin").use(CompressionWebpackPlugin, [
  {
    algorithm: "gzip",
    test: /\.(js|css)(\?.*)?$/i,
    threshold: 10240,
    minRatio: 0.7,
    deleteOriginalAssets: false,
  },
]);

6.brotli-webpack-plugin

作用
- 在打包时，提前压缩出 br 文件，后端可以直接返回，不用临时压缩
- 需要配合后端 nginx 配置的brotil_static on使用，同时还要 nginx 添加动态 brotil 模块
安装
```
npm i brotli-webpack-plugin -D
```

在 json 中配置

import BrotilWebpackPlugin from "brotli-webpack-plugin";

module.exports = {
  plugins: [
    new BrotilWebpackPlugin({
      test: /\.(js|css)(\?.*)?$/i,
      threshold: 10240,
      minRatio: 0.7,
    }),
  ],
};

在 chain 中配置

import BrotilWebpackPlugin from "brotli-webpack-plugin";

config.plugin("BrotilWebpackPlugin").use(BrotilWebpackPlugin, [
  {
    test: /\.(js|css)(\?.*)?$/i,
    threshold: 10240,
    minRatio: 0.7,
  },
]);

7. webpack-bundle-analyzer

作用
- 分析包的体积，生成图表
安装
```
npm i webpack-bundle-analyzer -D
```

在 json 中配置

import BundleAnalyzerPlugin from "webpack-bundle-analyzer";

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: process.env.STATS || "disabled",
    }),
  ],
};

在 chain 中配置

import BundleAnalyzerPlugin from "webpack-bundle-analyzer";

config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin, [
  {
    analyzerMode: process.env.STATS || "disabled",
  },
]);

使用
- 平时禁用，只有配置环境变量 STATS 才启用，然后在浏览器中打开一个窗口
- 改动package.json
```
"scripts": {
    "analyze": "cross-env STATS=server npm run start"
}
```
- 执行命令
```
npm run analyze
```

如果不想打开窗口，而是想生成文件类型的分析报告，可以添加配置项

analyzerMode: 'disabled'
generateStatsFile: false,
statsFilename: 'stats.json',

使用这个 json

"analyze-json": "webpack-bundle-analyzer --port 8888 ./dist/stats.json"

8. webpack-obfuscator

作用
- 对代码进行高强度的混淆，避免被人逆向
安装
```
npm i webpack-obfuscator -D
```

在 json 中配置

import WebpackObfuscator from "webpack-obfuscator";

module.exports = {
  plugins: [
    new WebpackObfuscator({
      rotateStringArray: true,
    }),
  ],
};

在 chain 中配置

import WebpackObfuscator from "webpack-obfuscator";

config.plugin("WebpackObfuscator").use(WebpackObfuscator, [
  {
    rotateStringArray: true,
  },
]);

9.HashedModuleIdsPlugin

作用
- 解决数字 id 问题，防止因其他模块的增加导致原有模块的 id 变化，使得缓存失效
- 原理: 不是生成数字，而是生成字符串 hash
无需安装
- 是在 webpack 3 中被引入的

在 json 中配置

module.exports = {
    plugins: [
        new webpack.ids.HashedModuleIdsPlugin()
    ]
}

在 chain 中配置

config.plugin("HashedModuleIdsPlugin").use(webpack.ids.HashedModuleIdsPlugin);

Keyboard shortcuts