webpack常用插件汇总

159 阅读6分钟

汇总

  • 文件处理上

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 自带dllplugindllreferenceplugin提供了拆分捆绑包的方法,这些方式可以大大提高构建时间性能。
官方传送门

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
名称类型默认值描述
titleStringWebpack App用于生成的HTML文档的标题
filenameString | Function'index.html'写入HTML的文件。可以指定一个子目录(例如:assets / admin.html);也可以是个 函数 ,例如 (entryName)=> entryName +'.html'
templateString-webpack模板的相对或绝对路径。 默认情况下,它将使用src / index.ejs(如果存在)
templateContentBoolean | Function | falsefalse可以代替模板来使用以提供内联模板
templateParametersBoolean | Object | Functionfalse允许覆盖模板中使用的参数。例子
injectBoolean | Stringtrue值有: true || 'head' || 'body' || false
将所有 assets 注入给定的templatetemplateContent。 当传递body时,所有的javascript资源都将放置在body元素的底部head 会将脚本放置在head元素中。 传递true会根据scriptLoading选项将其添加到head/body。 传递false将禁用自动注入。
publicPathString | 'auto''auto'用于 scriptlink标签的publicPath
scriptLoading'blocking' | 'defer''defer'现代浏览器支持非阻塞javascript加载(“延迟”)以提高页面启动性能
publicPathString | 'auto''auto'用于 scriptlink标签的publicPath
faviconString-将给定的favicon 路径添加到输出HTML
metaObject{}注入meta。例如:meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
baseObject | String | falsefalse注入base标签。例如:base: "example.com/path/page.h…"
minifyBoolean | Objecttrue if mode is 'production', otherwise false控制是否以及以何种方式最小化输出。即 对 html 文件进行压缩
hashBooleanfalse如果为true,则将webpack编译的hash值附加到所有包含的scriptcss文件中
cacheBooleantrue仅在文件被更改时才生成一个新的文件
showErrorsBooleantrue错误详细信息将写入HTML页面
chunks??chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候,对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。
chunksSortModeString | Function'auto'chunks包含到HTML中之前应如何对其进行排序。 允许的值是 'none' | 'auto' | 'manual' | Function
excludeChunksArray-排除掉某些 js 文件
xhtmlBooleanfalse如果为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
名称类型默认值描述
dryBooleanfalsedry为true时,模拟删除,不会真的删掉文件
verboseBooleanfalse为true时 显示日志, 当drytrue时,总是会打印日志
cleanStaleWebpackAssetsBooleantrue自动删除未被使用的webpack资源
protectWebpackAssetsBooleantrue不允许删除当前的webpack资源
cleanOnceBeforeBuildPatternsArray['**/*']在Webpack编译之前删除一次文件。忽略的文件需要在开头加上 "!"号,数组中必须带有"**/*"通配符。此模式不安全的,因此要先在dry: true 下进行。
cleanAfterEveryBuildPatternsArray[]在每次 build 后根据匹配规则 删除 文件 。忽略的文件需要在开头加上 "!"号,数组中必须带有"**/*"通配符。此模式不安全的,因此要先在dry: true 下进行。
dangerouslyAllowCleanPatternsOutsideProjectBooleanfalse-

未完待续