webpack 插件

# webpack 插件

# webpack 常用 plugin

html-webpack-plugin：生成 HTML 文件
copy-webpack-plugin 拷贝文件
compression-webpack-plugin 生产环境时可选择让代码压缩 gzip.
terser-webpack-plugin 该插件使用 terser 来压缩 JavaScript。
mini-css-extract-plugin 本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，
clean-webpack-plugin 清理上一次项目生成的 bundle 文件
commons-chunk-plugin 提取公共代码

# 自定义 plugin

一个 JavaScript 命名函数。
在插件函数的 prototype 上定义一个 apply 方法。，方法传入 compiler 参数(compiler 对象代表了完整的 webpack 环境配置) 。
指定一个绑定到 webpack 自身的事件钩子。
处理 webpack 内部实例的特定数据。
功能完成后调用 webpack 提供的回调。

# loader 和 plugin 区别

作用不同

loader，它是一个转换器，用于对模块源码的转换，

plugin 是一个扩展器，为了扩展 webpack 的功能，目的在于解决 loader 无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务

运行时机不同

loader 运行在打包文件之前，plugins 在整个编译周期都起作用

loader 遵循单一职责，一个 loader 只做一件事情，plugins 是基于事件机制工作，会监听 webpack 打包过程中的某些节点，作用于 webpack 打包的整个过程

# webpack 插件应用

# webpack-bundle-analyzer(打包分析工具)

安装：npm install webpack-bundle-analyzer -D

依赖(加判断时)：npm install cross-env -D

使用

vue.config.js

configureWebpack: (config) => {
  if (process.env.use_analyzer) {
    const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
      .BundleAnalyzerPlugin;
    config.plugins.push(new BundleAnalyzerPlugin());
  }
};

1
2
3
4
5
6
7

package.json 添加 analyzer 脚本

"scripts": {
    "analyzer": "cross-env use_analyzer=true npm run build:prod",
},

1
2
3

运行：npm run analyzer
属性

config.plugins.push(new BundleAnalyzerPlugin({
  // 定义属性

  analyzerMode:'server', // 以是server，static，json，disabled。在server模式下，分析器将启动HTTP服务器来显示软件包报告。在“静态”模式下，会生成带有报告的单个HTML文件。在disabled模式下，你可以使用这个插件来将generateStatsFile设置为true来生成Webpack Stats JSON文件。
  analyzerHost: '127.0.0.1', // 将在“服务器”模式下使用的端口启动HTTP服务器。
  analyzerPort: 8888,  // 端口号。
  reportFilename: 'report.html', // 路径捆绑，将在static模式下生成的报告文件。相对于捆绑输出目录。
  defaultSizes: 'parsed'，// 默认显示在报告中的模块大小匹配方式。应该是stat，parsed或者gzip中的一个。
  openAnalyzer: true,// 在默认浏览器中自动打开报告。
  generateStatsFile:false:, // 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成。
  statsFilename: 'stats.json', //  相对于捆绑输出目录。
  statsOptions: null, // stats.toJson()方法的选项。例如，您可以使用source：false选项排除统计文件中模块的来源。
  logLevel: 'info', // 日志级别，可以是info, warn, error, silent。
  excludeAssets:null // 用于排除分析一些文件
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

参考：编写一个插件 (opens new window)

更新时间: 12/24/2021, 4:08:09 PM

← webpack loader webpack热更新原理→