webpack常用插件汇总汇总文件处理上 1、HtmlWebpackPlugin 包名：html-webpack-pl

汇总

文件处理上

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文件。
[官方传送门](https://github.com/NMFR/optimize-css-assets-webpack-plugin/)

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

名称	类型	默认值	描述
title	String	`Webpack App`	用于生成的HTML文档的标题
filename	String \| Function	`'index.html'`	写入HTML的文件。可以指定一个子目录（例如：assets / admin.html）；也可以是个函数，例如（entryName）=> entryName +'.html'
template	String	-	webpack模板的相对或绝对路径。默认情况下，它将使用`src / index.ejs`（如果存在）
templateContent	Boolean \| Function \| false	`false`	可以代替模板来使用以提供内联模板
templateParameters	Boolean \| Object \| Function	`false`	允许覆盖模板中使用的参数。例子
inject	Boolean \| String	`true`	值有： `true \|\| 'head' \|\| 'body' \|\| false` 将所有 `assets` 注入给定的`template`或`templateContent`。当传递`body`时，所有的javascript资源都将放置在`body`元素的`底部`。 `head` 会将脚本放置在`head`元素中。传递`true`会根据`scriptLoading`选项将其添加到`head/body`。传递`false`将禁用自动注入。
publicPath	String \| 'auto'	`'auto'`	用于 `script`和`link`标签的`publicPath`
scriptLoading	'blocking' \| 'defer'	`'defer'`	现代浏览器支持非阻塞javascript加载（“延迟”）以提高页面启动性能
publicPath	String \| 'auto'	`'auto'`	用于 `script`和`link`标签的`publicPath`
favicon	String	-	将给定的`favicon` 路径添加到输出HTML
meta	Object	`{}`	注入`meta`。例如：meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
base	Object \| String \| false	`false`	注入`base`标签。例如：base: "example.com/path/page.h…"
minify	Boolean \| Object	`true` if `mode` is `'production'`, otherwise `false`	控制是否以及以何种方式最小化输出。即对 html 文件进行压缩
hash	Boolean	`false`	如果为`true`，则将webpack`编译的hash值`附加到所有包含的`script`和`css`文件中
cache	Boolean	`true`	仅在文件被更改时才生成一个新的文件
showErrors	Boolean	`true`	错误详细信息将写入HTML页面
chunks	?	`?`	`chunks` 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。
chunksSortMode	String \| Function	`'auto'`	将`chunks`包含到HTML中之前应如何对其进行排序。允许的值是 `'none' \| 'auto' \| 'manual' \| Function`
excludeChunks	Array	-	排除掉某些 js 文件
xhtml	Boolean	`false`	如果为true，则将`link`标签呈现为自动关闭（符合XHTML）

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

名称	类型	默认值	描述
dry	Boolean	false	dry为true时，模拟删除，不会真的删掉文件
verbose	Boolean	false	为true时显示日志，当`dry`为`true`时，总是会打印日志
cleanStaleWebpackAssets	Boolean	true	自动删除未被使用的webpack资源
protectWebpackAssets	Boolean	true	不允许删除当前的webpack资源
cleanOnceBeforeBuildPatterns	Array	['*/']	在Webpack编译之前删除一次文件。忽略的文件需要在开头加上 "!"号，数组中必须带有"*/"通配符。此模式不安全的，因此要先在dry: true 下进行。
cleanAfterEveryBuildPatterns	Array	[]	在每次 build 后根据匹配规则删除文件。忽略的文件需要在开头加上 "!"号，数组中必须带有"*/"通配符。此模式不安全的，因此要先在dry: true 下进行。
dangerouslyAllowCleanPatternsOutsideProject	Boolean	false	-

未完待续

webpack常用插件汇总

汇总

文件处理上