webpack 常用 plugin 介绍
由于 plugin 贯穿 webpack 的整个生命周期，其运行原理需要在了解 webpack 打包原理之后才能有比较直观的理解。因此，我们先来了解几个常用的 plugin，从应用层面认识一下，webpack 插件是如何工作的。
webpack-html-plugin
html-webpack-plugin 是 Webpack 的一个流行插件，用于简化 HTML 文件的创建，尤其是当你有多个依赖文件时。它自动在生成的 HTML 文件中引入了 Webpack 打包生成的所有资源文件，并提供了许多配置选项来自定义生成的 HTML 文件。
主要功能
自动注入资源：会自动将 Webpack 输出的 CSS 和 JavaScript 文件插入到生成的 HTML 文件中。
模板支持：支持使用 HTML 模板文件（如 EJS、Pug 等）来生成 HTML，或直接生成一个基础的 HTML 文件。
支持动态生成的变量：可以通过插件选项传入变量到模板中使用，这些变量可以在打包过程动态生成。
压缩 HTML：可以通过配置项压缩生成的 HTML 文件，删除空白字符、注释、换行等，减少文件体积。
基本安装和使用
首先，通过 npm 或 yarn 安装插件：
npm install --save-dev html-webpack-plugin
然后，在 Webpack 配置中添加此插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'APP', // 指定页面标题
template: './src/index.html', // 使用自定义模板
filename: 'index.html', // 输出文件名
inject: 'body', // 将脚本注入到 body 部分
minify: { // 启用 HTML 压缩
collapseWhitespace: true,
removeComments: true,
},
}),
],
};
常用选项
| 属性名 | 默认值 | 说明 |
|---|---|---|
| title | Webpack App | 网页 document.title 的配置, 在index.html 文件中可以使用 <%= htmlWebpackPlugin.options.title %> 设置网页标题为这里设置的值。 |
| filename | index.html | html 文件生成的名称，可以使用 assets/index.html 来指定生成的文件目录和文件名 1. 生成文件的跟路径为ouput.path的目录。 2. ‘assets/index.html’ 和 ./assets/index.html 这两种方式的效果时一样的， 都是在 output.path 目录下生成 assets/index.html |
| template | 生成 filename 文件的模版， 如果存在 src/index.ejs， 那么默认将会使用这个文件作为模版。 重点：与 filename 的路径不同， 当匹配模版路径的时候将会从项目的跟路径开始 | |
| inject | true | 制定 webpack 打包的 js css 静态资源插入到 html 的位置， 为 true 或者 body 时， 将会把 js 文件放到 body 的底部， 为 head 时， 将 js 脚本放到 head 元素中 |
| favicon | 空 | 为生成的 html 配置一个 favicon |
| mete | {} | 为生成的 html 文件注入一些 mete 信息， 例如： {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'} |
| base | false | 在生成文件中注入 base 标签， 例如 base: "https://example.com/path/page.html |
| minify | 如果 mode 设置为 production 默认为 true 否则设置为 false | 是否压缩 |
webpack-bundle-analyzer
webpack-bundle-analyzer 是一个用于分析 Webpack 打包文件的插件。它能够可视化展示项目中各个模块的大小和依赖关系，帮助开发者识别打包中的大型模块和冗余依赖，优化项目性能。
主要功能
可视化打包结果：生成一个交互式的图表展示项目中每个文件或模块的大小，让开发者一目了然地了解打包结构。
打包体积优化：通过展示各个模块占用的大小，帮助开发者找到可能被拆分或懒加载的模块，降低打包后的文件体积。
重复依赖检查：能够显示出重复打包的依赖项，便于清理和优化项目依赖。
使用步骤
1. 安装插件
在项目根目录运行以下命令：
npm install --save-dev webpack-bundle-analyzer
2. 配置插件
在 Webpack 配置文件中引入并配置插件：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
// 其他 Webpack 配置
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'server', // 可选 'static'（生成静态文件），'json'（生成 JSON 报告），'disabled'（禁用插件）
openAnalyzer: true, // 构建完成后自动打开分析页面
generateStatsFile: true, // 是否生成 stats.json 文件
statsOptions: { source: false } // 控制 stats.json 中的信息内容
})
]
};
3. 执行构建
运行构建命令后，插件会启动本地服务器并打开分析页面，展示各模块在打包文件中的占比。
模式选项
**analyzerMode**：设置插件的工作模式，可以是'server'（默认），'static'，'json'或'disabled'。**openAnalyzer**：控制构建完成后是否自动打开分析结果页面。**generateStatsFile**：生成打包的 JSON 数据文件，可用于深入分析。
使用之后会生成一个资源地图
