Webpack插件 - 《Webpack》

HotModuleReplacementPlugin
- 模块热更新插件，热更新依赖于 webpack-dev-server ```javascript const webpack = require(‘webpack’)

plugins: [ new webpack.HotModuleReplacementPlugin(), // 热更新插件 ]


- **clean-webpack-plugin**
   - 用于在打包前清理上一次项目生成的 bundle 文件
```javascript
// 引入
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 所要清理的文件夹名称为dist
plugins: [
  new CleanWebpackPlugin(['dist']) 
]

extract-text-webpack-plugin
- 将 css 成生文件，而非内联。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象 ```javascript const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)

plugins: [ // 将css分离到/dist文件夹下的css文件夹中的index.css new ExtractTextPlugin(‘css/index.css’) ]


- **purifycss-webpack**
   - css多写或重复，在生产环境中去除
```javascript
const path = require('path')
const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件
const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的css

plugins: [
  new PurifyCssWebpack({
    paths: glob.sync(path.join(__dirname, 'src/*.html'))
  })
]

optimize-css-assets-webpack-plugin
- 减小 css 打包后的体积 ```javascript const OptimizeCSSAssetsPlugin = require(“optimize-css-assets-webpack-plugin”) // 压缩css代码

optimization: { minimizer: [ // 压缩css new OptimizeCSSAssetsPlugin({}) ] }


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

plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: true,  //是否启用文件缓存
    parallel: true   //使用多进程并行运行来提高构建速度
  })
]

ParallelUglifyPlugin
- 开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，每个子进程其实还是通过 UglifyJS 去压缩代码，但是变成了并行执行。 ```javascript const ParallelUglifyPlugin = require(‘webpack-parallel-uglify-plugin’)

plugins: [ new ParallelUglifyPlugin({ //cacheDir 用于配置缓存存放的目录路径。 cacheDir: ‘.cache/‘, sourceMap: true, uglifyJS: { output: { comments: false }, compress: { warnings: false } } }) ]


- **terser-webpack-plugin**
   - Webpack4.0 默认是使用 `terser-webpack-plugin` 这个压缩插件，在此之前是使用 `uglifyjs-webpack-plugin`，两者的区别是后者对 ES6 的压缩不是很好，同时我们可以开启 `parallel` 参数，使用多进程压缩，加快压缩
```javascript
const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码

optimization: {
  minimizer: [
    new TerserPlugin({
      parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1
      cache: true, // 是否缓存
      sourceMap: false
    })
  ]
}

NoErrorsPlugin
- 报错但不退出 webpack 进程。编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。
```
plugins: [new webpack.NoEmitOnErrorsPlugin()]
```
compression-webpack-plugin
- 所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。
- gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。需要后端配置支持。 ```javascript const CompressionPlugin = require(‘compression-webpack-plugin’)

plugins: [ new CompressionPlugin({ // gzip压缩配置 test: /.js$|.html$|.css/, // 匹配文件名 threshold: 10240, // 对超过10kb的数据进行压缩 deleteOriginalAssets: false, // 是否删除原文件 }) ]


- **DefinePlugin**
   - 通过 `DefinePlugin` 可以定义一些全局的变量，我们可以在模块当中直接使用这些变量，无需作任何声明，`DefinePlugin` 是 `webpack` 自带的插件。
```javascript
plugins: [
  new webpack.DefinePlugin({
    DESCRIPTION: 'This Is The Test Text.'
  })
]

// 直接引用
console.log(DESCRIPTION)

ProvidePlugin
- 自动加载模块。任何时候，当 identifier 被当作未赋值的变量时， module 就会自动被加载，并且 identifier 会被这个 module 输出的内容所赋值。这是 webpack 自带的插件。
```
module.exports = {
resolve: {
alias: {
 jquery: './lib/jquery'
}
},
plugins: [
//提供全局的变量，在模块中使用无需用require引入
new webpack.ProvidePlugin({
 $: 'jquery',
 React: 'react'
})
]
}
```
HappyPack
- HappyPack 能让 webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。要注意的是 HappyPack 对 file-loader、url-loader 支持的不友好，所以不建议对该 loader 使用。注意，当项目较小时，多线程打包反而会使打包速度变慢。 ```javascript // 1.安装 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. 在生产环境 webpack.prod.conf.js 文件进行配置 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, }), ]


- **copy-webpack-plugin**
   - 在 `public/index.html` 中引入了静态资源，但是打包的时候 webpack 并不会帮我们拷贝到 dist 目录，因此 `copy-webpack-plugin` 就可以很好地帮我做拷贝的工作了。
```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public/js/*.js',
          to: path.resolve(__dirname, 'dist', 'js'),
          flatten: true,
        },
      ],
    }),
  ],
}

IgnorePlugin
- 这是 webpack 内置插件，它的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去。比如我们要使用 moment 这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。虽然我设置了语言为中文，但是在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢。对此，我们可以用 IgnorePlugin 使得指定目录被忽略，从而使得打包变快，文件变小。
```
const Webpack = require('webpack')
plugins: [
//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
new Webpack.IgnorePlugin(/\.\/locale/, /moment/),
]
```
- 我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录，但是也使得我们使用的时候不能显示中文语言了，所以这个时候可以手动引入中文语言的目录。 ```javascript import moment from ‘moment’ //手动引入所需要的语言包 import ‘moment/locale/zh-cn’ moment.locale(‘zh-cn’)

let r = moment().endOf(‘day’).fromNow() console.log(r)


- **imagemin-webpack-plugin**
   - 图片过大，加载速度慢，浪费存储空间。可批量压缩图片
```javascript
//引入插件
var ImageminPlugin = require('imagemin-webpack-plugin').default;
//配置
plugins: [
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // 开发时不启用
      pngquant: {//图片质量
        quality: '95-100'
      }
    })
]

html-webpack-plugin

//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置
plugins: [
  new HtmlWebpackPlugin()
]

产生背景：多入口时，当你的 index.html 引入多个js，如果这些生成的js名称构成有 [hash] ，那么每次打包后的文件名都是变化的。
作用：HtmlWebpackPlugin 在此可以用于自动重新生成一个index.html或依据模板生成，帮你把所有生产的js文件引入到html中，最终生成到output目录
```
// 安装
npm install --save-dev html-webpack-plugin
//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置
plugins: [
new HtmlWebpackPlugin()
]
```

如果需要设置多个页面的配置，需要实例化多个HtmlWebpackPlugin对象，可以对其进行参数配置

const htmlWebPackConfig = {    
title: 'Hello Webpack', // 配置模板title   
template: '', // 模板来源html文件    
filename: 'index.html', // 生成的模板文件名    
favicon: '', // 指定页面的图标    
hash: true, // 是否生成hash添加在引入文件地址的末尾 默认为true    
inject: '', // 引入模板的注入位置 取值有（true/false/body/head）   
minify: { // 对生成的html文件进行压缩，默认是false        
   collapseWhitespace: true, // 是否去除空格        
   removeAttributeQuotes: true, // 去掉属性引用        
   caseSensitive: false, // 是否大小写敏感        
   removeComments: true, // 去掉注释    
},    
cache: true, // 表示内容变化的时候生成一个新的文件， 默认true    
showErrors: true, // 是否将错误信息写在页面， 默认true   
chunks: ['index'], // 引入模块，指的是entry中设置的多个js,这里是执行js, 否则引入全部
};

链接