![Test](https://oscimg.oschina.net/oscnet/4d2e3f5d-88d2-41fd-998b-1ef5dd391759.jpg ‘总结18个 webpack 插件，总会有你想要的！

Test

https://juejin.cn/post/6844904193589772301

1
何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。

Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。
Plugin 的特点

  是一个独立的模块 
 

  模块对外暴露一个 js 函数 
 

1
函数的原型 `(prototype)` 上定义了一个注入

compiler
对象的

apply
方法

函数中需要有通过

对象挂载的

webpack
事件钩子，钩子的回调中能拿到当前编译的

compilation
对象，如果是异步编译插件的话可以拿到回调

callback

  完成自定义子编译流程并处理

complition
对象的内部数据

  如果异步编译插件的话，数据处理完成后执行

回调。

下面介绍 18 个常用的 webpack 插件。
本文在gitthub做了收录：
https://github.com/Michael-lzg/my--article/blob/master/webpack/%E6%80%BB%E7%BB%9318%E4%B8%AAwebpack%E6%8F%92%E4%BB%B6.md

一、Webpack插件详解

1.1 HotModuleReplacementPlugin

模块热更新插件。
Hot-Module-Replacement
的热更新是依赖于
webpack-dev-server
，后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面，
HRM
是只更新修改的部分。

HotModuleReplacementPlugin
是
模块自带的，所以引入
后，在
plugins
配置项中直接使用即可。

1
const webpack = require('webpack')plugins: [  new webpack.HotModuleReplacementPlugin(), // 热更新插件]

1.2 html-webpack-plugin

生成 html 文件。将 webpack 中
entry
配置的相关入口
chunk
和
extract-text-webpack-plugin
抽取的 css 样式 插入到该插件提供的
template
或者
templateContent
配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式
link
插入到
head
元素中，
script
插入到
或者
body
中。

1
const HtmlWebpackPlugin = require('html-webpack-plugin')plugins: [  new HtmlWebpackPlugin({    filename: 'index.html',    template: path.join(__dirname, '/index.html'),    minify: {      // 压缩HTML文件      removeComments: true, // 移除HTML中的注释      collapseWhitespace: true, // 删除空白符与换行符      minifyCSS: true, // 压缩内联css    },    inject: true,  }),]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 inject 有四个选项值 
  
   
     true：默认值， 
     
 标签位于 
     
`html` 
 文件的 
     
 底部 
    
   
     body： 
     
 标签位于 
     
 文件的 
     
 底部（同 true） 
    
   
     head： 
     
 标签位于 
     
 标签内 
    
   
     false：不插入生成的 js 文件，只是单纯的生成一个 
     
 文件 
    
  
 多页应用打包 
 有时，我们的应用不一定是一个单页应用，而是一个多页应用，那么如何使用 webpack 进行打包呢。 
  
 const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {  entry: {    index: './src/index.js',    login: './src/login.js',  },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[hash:6].js',  },  //...  plugins: [    new HtmlWebpackPlugin({      template: './public/index.html',      filename: 'index.html', //打包后的文件名    }),    new HtmlWebpackPlugin({      template: './public/login.html',      filename: 'login.html', //打包后的文件名    }),  ],}

如果需要配置多个
HtmlWebpackPlugin
，那么
filename
字段不可缺省，否则默认生成的都是
index.html
。
但是有个问题，
和
login.html
会发现，都同时引入了
index.f7d21a.js
和
login.f7d21a.js
，通常这不是我们想要的，我们希望
中只引入
，
只引入
。

提供了一个
chunks
的参数，可以接受一个数组，配置此参数仅会将数组中指定的 js 引入到 html 文件中

1
module.exports = {  //...  plugins: [    new HtmlWebpackPlugin({      template: './public/index.html',      filename: 'index.html', //打包后的文件名      chunks: ['index'],    }),    new HtmlWebpackPlugin({      template: './public/login.html',      filename: 'login.html', //打包后的文件名      chunks: ['login'],    }),  ],}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  
  这样执行  
 `npm run build` 
 ，可以看到  
  中仅引入了 index 的 js 文件，而  
  中也仅引入了 login 的 js 文件。 
   
#### 1.3 clean-webpack-plugin
   
 `clean-webpack-plugin` 
  用于在打包前清理上一次项目生成的 bundle 文件，它会根据  
 `output.path` 
  自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过 hash 生成很多 bundle 文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。 
   
  const { CleanWebpackPlugin } = require('clean-webpack-plugin')plugins: [  new HtmlWebpackPlugin({    template: path.join(__dirname, '/index.html'),  }),  new CleanWebpackPlugin(), // 所要清理的文件夹名称]

1.4 extract-text-webpack-plugin

将 css 成生文件，而非内联 。该插件的主要是为了抽离 css 样式，防止将样式打包在 js 中引起页面样式加载错乱的现象

1
const ExtractTextPlugin = require('extract-text-webpack-plugin')plugins: [  // 将css分离到/dist文件夹下的css文件夹中的index.css  new ExtractTextPlugin('css/index.css'),]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  
   
#### 1.5 mini-css-extract-plugin
  将 CSS 提取为独立的文件的插件，对每个包含 css 的 js 文件都会创建一个 CSS 文件，支持按需加载 css 和  
 `sourceMap` 
 。只能用在 webpack4 中，对比另一个插件 extract-text-webpack-plugin 有以下特点: 
   
    
      异步加载 
     
    
      不重复编译，性能更好 
     
    
      更容易使用 
     
    
      只针对 CSS 
     
   
  这个插件应该只用在生产环境配置，并且在  
 `loaders` 
  链中不使用  
 `style-loader` 
 , 而且这个插件暂时不支持 HMR 
   
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {  module: {    rules: [      {        test: /\.(le|c)ss$/,        use: [          {            loader: MiniCssExtractPlugin.loader,            options: {              publicPath: '../',            },          },          'css-loader',          'postcss-loader',          'less-loader',        ],      },    ],  },  plugins: [    new MiniCssExtractPlugin({      filename: 'css/[name].[contenthash:8].css',      chunkFilename: 'css/[id].[contenthash:8].css',    }),  ],}

1.6 purifycss-webpack

有时候我们 css 写得多了或者重复了，这就造成了多余的代码，我们希望在生产环境进行去。

1
const path = require('path')const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的cssmodule.exports = merge(common, {  plugins: [    new PurifyCssWebpack({      paths: glob.sync(path.join(__dirname, 'src/*.html')),    }),  ],})
1
2
3
4
5
6
7
8
  
   
#### 1.7 optimize-css-assets-webpack-plugin
  我们希望减小 css 打包后的体积，可以用到  
 `optimize-css-assets-webpack-plugin` 
 。 
   
  const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css代码optimization: {  minimizer: [    // 压缩css    new OptimizeCSSAssetsPlugin({})  ]

1.8 UglifyJsPlugin

uglifyJsPlugin
是
vue-cli
默认使用的压缩代码方式，用来对 js 文件进行压缩，从而减小 js 文件的大小，加速 load 速度。它使用的是单线程压缩代码，打包时间较慢，所以可以在开发环境将其关闭，生产环境部署时再把它打开。

1
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')plugins: [  new UglifyJsPlugin({    uglifyOptions: {      compress: {        warnings: false      }    },    sourceMap: true,  //是否启用文件缓存    parallel: true   //使用多进程并行运行来提高构建速度  })
1
2
3
4
5
6
7
8
  
   
#### 1.9 ParallelUglifyPlugin
  开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，每个子进程其实还是通过  
 `UglifyJS` 
  去压缩代码，但是变成了并行执行。 
   
  const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')plugins: [  new ParallelUglifyPlugin({    //cacheDir 用于配置缓存存放的目录路径。    cacheDir: '.cache/',    sourceMap: true,    uglifyJS: {      output: {        comments: false,      },      compress: {        warnings: false,      },    },  }),]

1.10 terser-webpack-plugin

Webpack4.0 默认是使用
terser-webpack-plugin
这个压缩插件，在此之前是使用
uglifyjs-webpack-plugin
，两者的区别是后者对 ES6 的压缩不是很好，同时我们可以开启
parallel
参数，使用多进程压缩，加快压缩。

1
const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码optimization: {  minimizer: [    new TerserPlugin({      parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1      cache: true, // 是否缓存      sourceMap: false,    }),  ]}
1
2
3
4
5
6
7
8
9
10
11
12
13
  
   
#### 1.11 NoErrorsPlugin
  报错但不退出 webpack 进程。编译出现错误时，使用  
 `NoEmitOnErrorsPlugin` 
  来跳过输出阶段。这样可以确保输出资源不会包含错误。 `plugins: [new webpack.NoEmitOnErrorsPlugin()]` #### compression-webpack-plugin 
  所有现代浏览器都支持  
 `gzip` 
  压缩，启用  
  压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。 
  gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。 
   
  const CompressionPlugin = require('compression-webpack-plugin')plugins: [  new CompressionPlugin({    // gzip压缩配置    test: /\.js$|\.html$|\.css/, // 匹配文件名    threshold: 10240, // 对超过10kb的数据进行压缩    deleteOriginalAssets: false, // 是否删除原文件  }),]

当然，这个方法还需要后端配置支持。

1.12 DefinePlugin

我们可以通过
DefinePlugin
可以定义一些全局的变量，我们可以在模块当中直接使用这些变量，无需作任何声明，
是
自带的插件。

1
plugins: [  new webpack.DefinePlugin({    DESCRIPTION: 'This Is The Test Text.',  }),]// 直接引用console.log(DESCRIPTION)
1
2
3
4
5
6
7
8
9
  
   
#### 1.13 ProvidePlugin
  自动加载模块。任何时候，当  
 `identifier` 
  被当作未赋值的变量时， module 就会自动被加载，并且  
  会被这个 module 输出的内容所赋值。这是 webpack 自带的插件。 
   
  module.exports = {  resolve: {    alias: {      jquery: './lib/jquery',    },  },  plugins: [    //提供全局的变量，在模块中使用无需用require引入    new webpack.ProvidePlugin({      $: 'jquery',      React: 'react',    }),  ],}

1.14 DLLPlugin

1
这是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 `bundle(dll-only-bundle)` 。这个插件会生成一个名为

manifest.json
的文件，这个文件是用来让
DLLReferencePlugin
映射到相关的依赖上去的。
使用步骤如下
1、在 build 下创建
webpack.dll.config.js

1
const path = require('path')const webpack = require('webpack')module.exports = {  entry: {    vendor: [      'vue-router',      'vuex',      'vue/dist/vue.common.js',      'vue/dist/vue.js',      'vue-loader/lib/component-normalizer.js',      'vue',      'axios',      'echarts',    ],  },  output: {    path: path.resolve('./dist'),    filename: '[name].dll.js',    library: '[name]_library',  },  plugins: [    new webpack.DllPlugin({      path: path.resolve('./dist', '[name]-manifest.json'),      name: '[name]_library',    }),    // 建议加上代码压缩插件，否则dll包会比较大。    new webpack.optimize.UglifyJsPlugin({      compress: {        warnings: false,      },    }),  ],}
1
2
3
4
5
6
 
 2、在  
`webpack.prod.conf.js` 
 的 plugin 后面加入配置 
  
 new webpack.DllReferencePlugin({  manifest: require('../dist/vendor-manifest.json'),})

3、
package.json

1
2
文件中添加快捷命令 `(build:dll)` ```java
   "scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "lint": "eslint --ext .js,.vue src",    "build": "node build/build.js",    "build:dll": "webpack --config build/webpack.dll.conf.js"  }
1
2
3
4
5
6
7
8
9
10
11
12
13
  
  生产环境打包的时候先 
 `npm run build:dll` 
 命令会在打包目录下生成  
 `vendor-manifest.json` 
  文件与 vendor.dll.js 文件。然后 
 生产其他文件。 
  4、根目录下的入口  
  加入引用 
   
 ```xml
```html
<script type="text/javascript" src="./vendor.dll.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  
   
#### 1.15 HappyPack
   
 `HappyPack` 
  能让 webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。要注意的是  
  对  
 `file-loader` 
 、 
 `url-loader` 
  支持的不友好，所以不建议对该 loader 使用。 
  1、HappyPack 插件安装 
   
 `npm i -D happypack` 
  
  2、 
 `webpack.base.conf.js` 
  文件对 module.rules 进行配置 
   
  module: {  rules: [    {      test: /\.js$/,      use: ['happypack/loader?id=babel'],      include: [resolve('src'), resolve('test')],      exclude: path.resolve(__dirname, 'node_modules'),    },    {      test: /\.vue$/,      use: ['happypack/loader?id=vue'],    },  ]}

3、在生产环境
文件进行配置

1
const HappyPack = require('happypack')// 构造出共享进程池，在进程池中包含5个子进程const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })plugins: [  new HappyPack({    // 用唯一的标识符id，来代表当前的HappyPack是用来处理一特的文件    id: 'babel',    // 如何处理.js文件，用法和Loader配置中一样    loaders: ['babel-loader?cacheDirectory'],    threadPool: HappyPackThreadPool,  }),  new HappyPack({    id: 'vue', // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件    loaders: [      {        loader: 'vue-loader',        options: vueLoaderConfig,      },    ],    threadPool: HappyPackThreadPool,  }),]
1
2
3
4
5
6
7
8
9
10
11
  
  注意，当项目较小时，多线程打包反而会使打包速度变慢。 
   
#### 1.16 copy-webpack-plugin
  我们在  
 `public/index.html` 
  中引入了静态资源，但是打包的时候 webpack 并不会帮我们拷贝到 dist 目录，因此  
 `copy-webpack-plugin` 
  就可以很好地帮我做拷贝的工作了。 
   
  const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = {  plugins: [    new CopyWebpackPlugin({      patterns: [        {          from: 'public/js/*.js',          to: path.resolve(__dirname, 'dist', 'js'),          flatten: true,        },      ],    }),  ],}

1.17 IgnorePlugin

这是 webpack 内置插件，它的作用是：忽略第三方包指定目录，让这些指定目录不要被打包去
比如我们要使用
moment
这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。虽然我设置了语言为中文，但是在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢。对此，我们可以用
IgnorePlugin
使得指定目录被忽略，从而使得打包变快，文件变小。

1
const Webpack = require('webpack')plugins: [  //moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去  new Webpack.IgnorePlugin(/\.\/locale/, /moment/),]
1
2
3
4
5
6
7
8
  
  我们虽然按照上面的方法忽略了包含 
 `’./locale/'` 
 该字段路径的文件目录，但是也使得我们使用的时候不能显示中文语言了，所以这个时候可以手动引入中文语言的目录。 
   
 ```sql
```javascript
  import moment from 'moment'//手动引入所需要的语言包import 'moment/locale/zh-cn'moment.locale('zh-cn')let r = moment().endOf('day').fromNow()console.log(r)


                 
                
               
![Test](https://oscimg.oschina.net/oscnet/4d2e3f5d-88d2-41fd-998b-1ef5dd391759.jpg '总结18个 webpack 插件，总会有你想要的！')

本文标题： 总结18个 webpack 插件，总会有你想要的！

发布时间： 2022年03月05日 00:00

最后更新： 2025年12月30日 08:54

原始链接： https://haoxiang.eu.org/5c706c0c/

版权声明： 本文著作权归作者所有，均采用CC BY-NC-SA 4.0许可协议，转载请注明出处！

赏
× 喜欢就赞赏一下呗！
打赏二维码