Webpack Plugin 浅析

2,274 阅读3分钟

Plugin 是什么

Plugin 是 Webpack 中的扩展器,在 Webpack 运行的生命周期中会广播出许多钩子事件,Plugin 可以监听这些事件,并挂载自己的任务,也就是注册事件。当 Webpack 构建的时候,插件注册的事件就会随着钩子的触发而执行了。

Plugin 与 Loader 的区别

Plugin 与 Loader 功能不同

  • Loader 是一个转换器:能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中。
  • Plugin 是一个扩展器:赋予了 webpack 各种灵活的功能,例如打包优化、资源管理、环境变量注入等,目的是解决 loader 无法实现的其他事。

Plugin 与 Loader 运行时机不同

image 可以看到,两者在运行时机上的区别:

  • Loader 运行在打包文件之前
  • Plugin 在整个编译周期都起作用

Plugin 的使用

Plugin 配置方式

webpack.config.js 文件中,通过 Webpack 配置对象的 plugins 属性进行配置,plugins 为一个数组,其元素要求为插件对象 Plugin 的实例,配置参数可以通过 Plugin 在实例化时的构造参数进行传递,例如配置 html-webpack-plugin 如下:

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
  ],
};

常见的 Plugin

1 html-webpack-plugin(HTML 文件生成插件)

  • 背景:多入口时,当你的 index.html 引入多个 js 文件,如果这些生成的 js 名称构成有 [hash] ,那么每次打包后的文件名都是变化的。
  • 作用:可以用于自动重新生成一个 index.html ,并帮你把所有生产的 js 文件引入到 html 中,最终生成到 output 目录。
  • 安装:
yarn add --dev html-webpack-plugin
  • 配置:
//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置
module.exports = = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

2 mini-css-extract-plugin(css 提取插件)

  • 背景:在进行打包时,CSS 代码会打包到 JS 中,不利于文件缓存。
  • 作用:依据每个 entry 生成单个 CSS 文件(将 CSS 从 JS 中提取出来)。
  • 安装:
yarn add --dev mini-css-extract-plugin
  • 配置:
const MiniCssExtractPlugin  = require('mini-css-extract-plugin');
module.exports = = {
  // ...
  plugins: [
    new MiniCssExtractPlugin(),
  ],
};

3 imagemin-webpack-plugin(图片压缩插件)

  • 背景:图片过大,加载速度慢,浪费存储空间。
  • 作用:批量压缩图片。
  • 安装:
yarn add --dev imagemin-webpack-plugin
  • 配置:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
module.exports = {
  // ...
  plugins: [
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // 开发时不启用
      pngquant: {
        //图片质量
        quality: '95-100',
      },
    }),
  ],
};

4 clean-webpack-plugin(清空文件夹插件)

  • 背景:每次进行打包需要手动清空目标文件夹。
  • 作用:每次打包时先清空 output 文件夹。
  • 安装:
yarn add --dev clean-webpack-plugin
  • 配置:
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  // ...
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 自动清空 dist 文件夹
  plugins: [new CleanWebpackPlugin(['dist'])],
};

5 copy-webpack-plugin(文件复制插件)

  • 背景:一些静态资源(图片、字体等),在编译时,需要拷贝到输出文件夹。
  • 作用:用来复制文件或文件夹。
  • 安装:
yarn add --dev copy-webpack-plugin
  • 配置:
// 引入
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CopyPlugin([
      { from: 'assets', to: 'dist' },
      { from: 'images/xxx.png', to: 'dist' },
    ]),
  ],
};

6 compression-webpack-plugin(gzip 压缩插件)

  • 背景:所有现代浏览器都支持 gzip 压缩,启用 gzip 压缩可大幅缩减传输资源大小,从而缩短资源下载时间,减少首次白屏时间,提升用户体验。
  • 作用:用来对一些文本文件(JS CSS HTML)文件进行 gzip 压缩。
  • 安装:
yarn add --dev compression-webpack-plugin
  • 配置:
// 引入
const CompressionPlugin = require('compression-webpack-plugin');

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

参考文档