汇总

• 文件处理上

1、HtmlWebpackPlugin

包名：html-webpack-plugin

该插件将为你生成一个 HTML 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
官方传送门

2、CleanWebpackPlugin

包名：clean-webpack-plugin

用于在打包前清理上一次项目生成的 bundle文件。默认情况下，此插件将删除webpack的Output.Path目录中的所有文件，以及在每次成功重建后所有未使用的webpack资源（assets）。如果使用的webpack版本是 4 以上的，默认 清理 <PROJECT_DIR>/dist/下的文件。
官方传送门

3、MiniCssExtractPlugin

包名：mini-css-extract-plugin

将 css 成生文件，而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象。支持按需加载 css 和 sourceMap
官方传送门

4、HotModuleReplacementPlugin

包名：HotModuleReplacementPlugin

由 webpack 自带。在对CSS / JS文件进行修改时，可以立即更新浏览器（部分刷新）。依赖于 webpack-dev-server
官方传送门

5、ImageminPlugin

包名：imagemin-webpack-plugin

批量压缩图片。
官方传送门

6、PurifyCSSPlugin

包名：purifycss-webpack

从CSS中删除未使用的选择器（删除多余的 css 代码）。和 extract-text-webpack-plugin 一起使用
官方传送门

7、OptimizeCSSAssetsPlugin

包名：optimize-css-assets-webpack-plugin

压缩css文件。
官方传送门

8、CssMinimizerPlugin

包名： css-minimizer-webpack-plugin

压缩css文件。**用于 webpack 5 **。
官方传送门

9、UglifyJsPlugin

包名：uglifyjs-webpack-plugin

压缩js文件。
官方传送门

10、ProvidePlugin

包名：ProvidePlugin

由 webpack 自带。自动加载模块，而不必在任何地方import或require它们。例如：new webpack.ProvidePlugin({$: 'jquery',React: 'react'})
官方传送门

11、SplitChunksPlugin

包名：-

在webapck配置中的optimization字段中配置。cacheGroups 是关键，将文件提取打包成公共模块，像 抽取 node_modules里的文件。
官方传送门

12、CompressionPlugin

包名：compression-webpack-plugin

启用 gzip 压缩。
官方传送门

13、CopyWebpackPlugin

包名： copy-webpack-plugin

将已存在的单个文件或整个目录复制到构建目录中。多用于 将静态文件 因在打包时 webpack 并不会帮我们拷贝到 dist 目录 拷贝到 dist 目录
官方传送门

14、DefinePlugin

包名：DefinePlugin

由 webpack 自带。设置全局变量。如：new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')})
官方传送门

• 打包速率上

1、DllPlugin

包名：DllPlugin

由 webpack 自带。dllplugin和dllreferenceplugin提供了拆分捆绑包的方法，这些方式可以大大提高构建时间性能。
官方传送门

2、DLLReferencePlugin

包名：DLLReferencePlugin

由 webpack 自带。它引用了仅需要预先构建的依赖项的 DLL-only-Bundle。
官方传送门

3、ParallelUglifyPlugin

包名：webpack-parallel-uglify-plugin

开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成。减少构建时间。
官方传送门

4、HappyPack

包名：happypack

让 webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。提升 构建 速度
官方传送门

明细

1、html-webpack-plugin

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle
官方传送门

• 用法

# Webpack 5
npm install --save-dev html-webpack-plugin
yarn add --dev html-webpack-plugin

# Webpack 4
npm i --save-dev html-webpack-plugin@4
yarn add --dev html-webpack-plugin@4

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

• option

2、clean-webpack-plugin

用于在打包前清理上一次项目生成的 bundle文件。默认情况下，此插件将删除webpack的Output.Path目录中的所有文件，以及在每次成功重建后所有未使用的webpack资源（assets）
如果使用的webpack版本是 4 以上的，默认 清理 <PROJECT_DIR>/dist/下的文件
官方传送门

• 用法

npm install --save-dev clean-webpack-plugin

// webpack.config.js
const { CleanWebpackPlugin }= require('clean-webpack-plugin');

module.exports = {
/* 如果使用的webpack版本是 **4** 以上的，默认 清理  <PROJECT_DIR>/dist/ 下的文件
 */
  plugins: [new CleanWebpackPlugin ()],
};

• option

未完待续