汇总
-
文件处理上
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
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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: "https://example.com/path/page.html" |
| 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 | - |
未完待续
网友评论