# plugin
webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能，
在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。 ——「深入浅出 Webpack」
在打包的特定时间做特定的事；Loader是用于特定的模块类型进行转换；Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；
通常的插件都是一个class，不过也可以是函数。
webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。
钩子的本质就是：事件。为了方便我们直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做：hooks（钩子）。开发插件，离不开这些钩子。
# Tapable
Tapable 为 webpack 提供了统一的插件接口（钩子）类型定义，它是 webpack 的核心功能库。webpack 中目前有十种 hooks，在 Tapable 源码中可以看到，他们是：
// https://github.com/webpack/tapable/blob/master/lib/index.js
exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesLoopHook = require("./AsyncSeriesLoopHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
exports.HookMap = require("./HookMap");
exports.MultiHook = require("./MultiHook");
Tapable 还统一暴露了三个方法给插件，用于注入不同类型的自定义构建行为：
- tap：可以注册同步钩子和异步钩子。
- tapAsync：回调方式注册异步钩子。
- tapPromise：Promise 方式注册异步钩子。
# Plugin 构建对象
- Compiler
compiler 对象中保存着完整的 Webpack 环境配置，每次启动 webpack 构建时它都是一个独一无二，仅仅会创建一次的对象。
这个对象会在首次启动 Webpack 时创建，我们可以通过 compiler 对象上访问到 Webapck 的主环境配置，比如 loader 、 plugin 等等配置信息。
它有以下主要属性：
- compiler.options 可以访问本次启动 webpack 时候所有的配置文件，包括但不限于 loaders 、 entry 、 output 、 plugin 等等完整配置信息。
- compiler.inputFileSystem 和 compiler.outputFileSystem 可以进行文件操作，相当于 Nodejs 中 fs。
- compiler.hooks 可以注册 tapable 的不同种类 Hook，从而可以在 compiler 生命周期中植入不同的逻辑。
- Compilation
compilation 对象代表一次资源的构建，compilation 实例能够访问所有的模块和它们的依赖。
一个 compilation 对象会对构建依赖图中所有模块，进行编译。 在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(restore)。
它有以下主要属性：
- compilation.modules 可以访问所有模块，打包的每一个文件都是一个模块。
- compilation.chunks chunk 即是多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个 chunk，通过代码分割的模块又是另外的 chunk。
- compilation.assets 可以访问本次打包生成所有文件的结果。
- compilation.hooks 可以注册 tapable 的不同种类 Hook，用于在 compilation 编译模块阶段进行逻辑添加以及修改。
# html-webpack-plugin 模板html
cnpm install html-webpack-plugin -D
...
plugins:[new htmlwebpackPlugin({
template:'./index.html'//output里的js等文件自动注入
})],
...
const HtmlWebpackPlugin = require("html-webpack-plugin");
...
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
title: "哈哈哈哈" //需要title用下方的ejs模板引擎才会替换
}),
],
默认情况下是根据ejs的一个模板来生成的；在html-webpack-plugin的源码中，有一个default_index.ejs模块；
如果需要定制index.html
- template：指定我们要使用的模块所在的路径；
- title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；
<title><%= htmlWebpackPlugin.options.title %></title>
如果需要设置BASE_URL，可以使用DefinePlugin插件，DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
const { DefinePlugin } = require("webpack");
......
plugins:[
new DefinePlugin({
BASE_URL: "'./'"
}),
]
# clean-webpack-plugin 清除掉打包文件内容
在webapck5中可以直接使用output中配置clean：true清空对应的打包文件，不需要继续安装
cnpm install clean-webpack-plugin -D
这个插件在webpack4中接受的是对象
// webpack版本：4.32.2
//error: CleanWebpackPlugin is not a constructor
// 抛错原写法
const CleanWebpackPlugin = require("clean-webpack-plugin");
...
plugins: [
new CleanWebpackPlugin(['dist'])
]
// 另一种错误写法
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../'), //根目录
})
]
// =============================分割线==============================
// 正确写法
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [
new CleanWebpackPlugin()
]
output中的path需要配置，不配置的话可能会导致CleanWebpackPlugin无效
# DefinePlugin
DefinePlugin的工作原理。这个插件允许在构建过程中定义全局常量，这些常量可以在代码中被访问。由于Webpack在构建时处理这些常量，它们的值必须是字符串形式，以便正确替换。
给代码定义一些环境变量；
html模块中还使用到一个BASE_URL的常量：这是因为在编译template模块时，有一个BASE_URL：
注意BASE_URL: " './' ",自身是被引号包裹
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
但是并没有设置过这个常量值，所以会出现没有定义的错误；这个时候可以使用DefinePlugin插件；
DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：
const path = require("path");
const { DefinePlugin } = require("webpack");
module.exports = {
mode: "development",
// 设置source-map, 建立js映射文件, 方便调试代码和错误
devtool: "source-map",
plugins: [
new DefinePlugin({
BASE_URL: "'./'",
__VUE_OPTIONS_API__: true, //vue3的配置，关闭option api，默认是false
__VUE_PROD_DEVTOOLS__: false//关闭devtools
})
]
};
这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值；
const settingData = Object.keys(obj).reduce((acc, key) => {
acc[`PROCESS_ENV_${key.toUpperCase()}`] = JSON.stringify(obj[key]);
return acc;
}, {});
// 使用示例：
// new webpack.DefinePlugin(settingData)
如果您的 Webpack 版本 >= 5，直接使用：
import { Configuration, DefinePlugin } from 'webpack';
若版本 < 5，可能需要：
const webpack = require('webpack');
const { DefinePlugin } = webpack;
对于动态值，建议使用 dotenv-webpack 或 Webpack 的 EnvironmentPlugin：
import { EnvironmentPlugin } from 'webpack';
// webpack.config.ts
plugins: [
new EnvironmentPlugin({
API_URL: process.env.API_URL,
}),
]
接受EnvironmentPlugin一个键数组或一个将其键映射到其默认值的对象。
new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']);
这相当于以下DefinePlugin应用程序：
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
});
警告
EnvironmentPlugin检查process.env指定的变量。如果缺少，它会搜索配置中提供的默认值。如果环境变量和默认值均未定义，则会抛出错误：“ EnvironmentPlugin-${key}环境变量是undefined”。
# CopyWebpackPlugin（copy-webpack-plugin）
在vue的打包过程中，如果将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。这个复制的功能，此时可以使用CopyWebpackPlugin来完成；
npm install copy-webpack-plugin -D
接下来配置CopyWebpackPlugin即可：复制的规则在patterns中设置；
- from：设置从哪一个源中开始复制；
- to：复制到的位置，可以省略，会默认复制到打包的目录下； './'默认值，如果改成'./dist'，就会在打包目录下生成一个dist目录放静态文件
- globOptions：设置一些额外的选项，其中可以编写需要忽略的文件：
- .DS_Store：mac目录下回自动生成的一个文件；
- index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成；
应用场景：icon图标从public赋值到dist目录下
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins:[
new CopyWebpackPlugin({
patterns: [
{
from: "public",
to: "./",
globOptions: {
ignore: [
"**/index.html"
]
}
}
]
})
]
}
# mini-css-extract-plugin CSS抽离
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式
这样对于网站来说，会出现闪屏现象，用户体验不好,应该是单独的 Css 文件，通过 link 标签加载性能才好
npm i mini-css-extract-plugin -D
在loader中配置取代style-loader，也要在plugins中配置，可以配置输出目录等
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.styl$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
},
],
},
plugins: [
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
],
mode: "production",
};
# MiniCssExtractPlugin具体参数配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ... 其他配置项
entry: {
main: './src/index.js', // 假设你的入口文件是 src/index.js
// 可以有其他入口点...
},
output: {
path: path.resolve(__dirname, 'dist'), // 输出的目录
filename: '[name].bundle.js', // 输出的 JavaScript 文件名
},
module: {
rules: [
{
test: /\.css$/, // 匹配所有 CSS 文件
use: [
process.env.NODE_ENV !== 'production'
? 'style-loader' // 开发环境下使用 style-loader
: MiniCssExtractPlugin.loader, // 生产环境下使用 MiniCssExtractPlugin.loader
'css-loader', // 加载 CSS 文件
// 你可以在这里添加其他 CSS 预处理器的 loader，比如 sass-loader、less-loader 等
],
},
// ... 其他 loader 配置
],
},
plugins: [
// 添加 MiniCssExtractPlugin 插件
new MiniCssExtractPlugin({
// 定义非异步加载的 CSS 的输出文件名和目录
filename: 'static/css/[name].css', // 根据 entry 名称来命名
// 定义异步加载的 CSS 的输出文件名和目录
chunkFilename: 'static/css/chunks/[id].css', // 根据 webpack chunk ID 来命名
}),
// ... 其他插件配置
],
mode: 'production', // 或者 'development' 根据你的需要设置
// ... 其他配置项
};
- filename
filename 定义了那些非异步加载的 CSS 块的输出文件名和目录。这些通常对应于 Webpack 的入口点（entry points）。当你有一个或多个入口点（entry points）在 JavaScript 文件中 import 或 require 了 CSS 文件，并且这些 CSS 文件没有被动态地（例如，通过 import() 语法）引入时，这些 CSS 就会被视为非异步加载的 CSS。
例如，假设你有以下的 Webpack 入口配置：
entry: {
app: './src/app.js',
admin: './src/admin.js'
}
如果在 app.js 和 admin.js 中分别 import 了两个 CSS 文件：
// app.js
import './styles/app.css';
// admin.js
import './styles/admin.css';
并且你使用了 MiniCssExtractPlugin 的默认配置或配置了 filename: 'static/css/[name].css'，那么 Webpack 会输出两个 CSS 文件：
static/css/app.css
static/css/admin.css
这里的 [name]会被替换为对应的入口名称（在这里是 app 和 admin）。
- chunkFilename
chunkFilename 定义了那些异步加载的 CSS 块的输出文件名和目录。这些通常对应于通过 Webpack 的动态导入（code splitting）功能分割出来的代码块。当你使用 import() 语法动态地加载 JavaScript 或 CSS 模块时，这些模块就会被视为异步加载的。
例如，如果你在 JavaScript 文件中使用了动态导入来加载 CSS
button.addEventListener('click', event => {
import('./styles/dynamic.css')
.then(() => {
// CSS 加载完成
})
.catch(err => {
// 加载失败
});
});
在这种情况下，Webpack 会根据 chunkFilename 的配置来输出 CSS 文件。如果配置了 chunkFilename: 'static/css/chunks/[id].css'，那么输出的 CSS 文件名将会包含一个由 Webpack 生成的唯一 ID（例如 static/css/chunks/0.css）。
总结来说，filename 主要对应于静态或同步加载的 CSS（通常是基于入口点的），而 chunkFilename 主要对应于动态或异步加载的 CSS（通常是通过 import() 语法加载的）。
如果chunkFilename未配置，默认和filename生成的文件放在同一个目录下.
# css-minimizer-webpack-plugin(CssMinimizerPlugin) css压缩
npm i css-minimizer-webpack-plugin -D
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: getStyleLoaders(),
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
],
},
plugins: [
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
// filename: "static/css/main.css",
// 当多文件时使用name防止冲突
filename: "static/css/[name].css",
// 如果有code split 动态引入的css也可以chunkFileName处理
chunkFilename: "static/css/[name].chunk.[contenthash:10].css",
}),
// css压缩
new CssMinimizerPlugin(),
],
mode: "production",
};
# optimize-css-assets-webpack-plugin
这是一个 Webpack 插件，用于优化和最小化 CSS 资产。这个插件通常与 css-loader 和 mini-css-extract-plugin 一起使用，以在 Webpack 构建过程中压缩 CSS 文件。[w4以下适用，如果w5，建议还是用css-minimizer-webpack-plugin]
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [
// 默认的压缩器（TerserPlugin）是包含在内的
// ...
// 添加 OptimizeCSSAssetsPlugin 到压缩器数组
new OptimizeCSSAssetsPlugin({}),
],
},
// ...
};
从 Webpack 4 开始，优化插件（包括压缩器）被移动到了 optimization.minimizer 配置项中。如果你使用的是 Webpack 4 或更高版本，那么你应该将 OptimizeCSSAssetsPlugin 添加到 optimization.minimizer 数组中。
# purifycss-webpack 移除未执行的css
它用于移除 CSS 文件中未使用的部分（即“死代码”），从而减小最终生成的 CSS 文件的大小。这在生产环境中特别有用，因为它可以显著减少发送到浏览器的数据量，提高加载速度。
purifycss-webpack 插件的工作原理是：它会分析你的 JavaScript 文件和模板文件（如 HTML、JSX 等），找出其中引用的 CSS 类名，并只保留这些被引用的 CSS 规则。未被引用的 CSS 规则将被从最终生成的 CSS 文件中移除。
在最新版w5中无法兼容，不过可以在css-minimizer-webpack-plugin结合插件配置同等功能
const PurifyCSSPlugin = require('purifycss-webpack');
const glob = require('glob');
module.exports = {
// ...
plugins: [
new PurifyCSSPlugin({
// 给出需要分析的源文件路径
paths: glob.sync(path.join(__dirname, 'src/*.html')),
// 在 HTML 中，CSS 类名可能以 data-v-*、x-* 等形式存在
// 你可以使用 purifyOptions 来自定义提取类名的正则表达式
purifyOptions: {
whitelist: [], // 不希望被移除的类名列表
// 其他 purifycss 的选项...
},
}),
// ...
],
// ...
};
# purgecss-webpack-plugin
移除未使用的css
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');
// ...
plugins: [
// ...
new PurgeCSSPlugin({
paths: glob.sync([
path.resolve(__dirname, 'src/**/*.js'),
path.resolve(__dirname, 'src/**/*.jsx'),
path.resolve(__dirname, 'src/**/*.ts'),
path.resolve(__dirname, 'src/**/*.tsx'),
path.resolve(__dirname, 'src/**/*.vue'),
path.resolve(__dirname, 'src/**/*.html'),
// ... 其他需要扫描的文件类型
]),
safelist: ['k1', 'k2'], // 添加你的安全列表// 安全列表，不想被移除的 CSS 类名 k1 k2不会被移除
// 其他 PurgeCSS 配置项...
}),
// ...
],
// ...
存在import动态导入的代码，可能不会被打包，需要配置purgecss start ignore+ purgecss end ignore保证不会丢失
/* purgecss start ignore */
/* 这里的内容不会被 PurgeCSS 移除 */
/* purgecss end ignore */
TIP
除了 PurgeCSS 和 cssnano 之外，还有其他一些工具可以帮助你自动化移除未使用的 CSS，例如：
UnCSS：一个通过解析 HTML 和 CSS 移除未使用的 CSS 的工具。 PurgeCSS CLI：PurgeCSS 的命令行接口版本，可以独立使用。
# image-minimizer-webpack-plugin 图片压缩优化
用来压缩图片的插件
npm i image-minimizer-webpack-plugin imagemin -D
还有剩下包需要下载，有两种模式：
- 无损压缩
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
- 有损压缩
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
- 无损压缩配置
const os = require("os");
const path = require("path");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
// cpu核数
const threads = os.cpus().length;
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
clean: true,
},
module: {
rules: [
{
oneOf: [
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
},
},
generator: {
filename: "static/imgs/[hash:8][ext][query]",
},
}
],
},
],
},
optimization: {
minimizer: [
// 压缩图片
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
[
"svgo",
{
plugins: [
"preset-default",
"prefixIds",
{
name: "sortAttrs",
params: {
xmlnsOrder: "alphabetical",
},
},
],
},
],
],
},
},
}),
],
},
mode: "production"
};
打包报错，npm安装的这两个包由于多种原因可能安装失败，可多安装几次或者镜像安装
Error: Error with 'src\images\1.jpeg': '"C:\Users\86176\Desktop\webpack\webpack_code\node_modules\jpegtran-bin\vendor\jpegtran.exe"'
Error with 'src\images\3.gif': spawn C:\Users\86176\Desktop\webpack\webpack_code\node_modules\optipng-bin\vendor\optipng.exe ENOENT
# @vue/preload-webpack-plugin 预加载
npm i @vue/preload-webpack-plugin -D
用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果。
我们想在浏览器空闲时间，加载后续需要使用的资源。我们就需要用上 Preload 或 Prefetch 技术。
Preload：告诉浏览器立即加载资源。
Prefetch：告诉浏览器在空闲时才开始加载资源。
它们共同点：
- 都只会加载资源，并不执行。
- 都有缓存。
它们区别：
- Preload加载优先级高，Prefetch加载优先级低。
- Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源。
总结：
- 当前页面优先级高的资源用 Preload 加载。
- 下一个页面需要使用的资源用 Prefetch 加载。
它们的问题：兼容性较差，Preload 相对于 Prefetch 兼容性好一点。
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
clean: true,
},
plugins: [
new PreloadWebpackPlugin({
rel: "preload", // preload兼容性更好
as: "script",
// rel: 'prefetch' // prefetch兼容性更差
}),
],
mode: "production"
};
# eslint-webpack-plugin
npm i eslint-webpack-plugin eslint -D
Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以希望做一些兼容性处理。其次开发中，团队对代码格式是有严格要求的，不能由肉眼去检测代码格式，需要使用专业的工具来检测。
- 针对 js 兼容性处理，我们使用 Babel 来完成
- 针对代码格式，我们使用 Eslint 来完成
eslint：可组装的 JavaScript 和 JSX 检查工具。
- 配置文件 配置文件由很多种写法：
// 区别在于配置格式不一样
.eslintrc.*：新建文件，位于项目根目录
.eslintrc
.eslintrc.js
.eslintrc.json
package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写,ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可
以 .eslintrc.js 配置文件为例:
module.exports = {
// 解析选项
parserOptions: {},
// 具体检查规则
rules: {},
// 继承其他规则
extends: [],
// ...
// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};
- parserOptions 解析选项
parserOptions: {
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
}
- rules 具体规则
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
rules: {
semi: "error", // 禁止使用分号
'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
'default-case': [
'warn', // 要求 switch 语句中有 default 分支，否则警告
{ commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
],
eqeqeq: [
'warn', // 强制使用 === 和 !==，否则警告
'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
],
}
- extends 继承 开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。
现有以下较为有名的规则：
- Eslint 官方的规则：eslint:recommended
- Vue Cli 官方的规则：plugin:vue/essential
- React Cli 官方的规则：react-app
// 例如在React项目中，我们可以这样写配置
module.exports = {
extends: ["react-app"],
rules: {
// 自己写的规则会覆盖掉react-app的规则
// 所以想要修改规则直接改就是了
eqeqeq: ["warn", "smart"],
},
};
# 配置
- 创建.eslintrc.js
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
parser: "@babel/eslint-parser", // 支持最新的最终 ECMAScript 标准
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
},
rules: {
"no-var": 2, // 不能使用 var 定义变量
},
plugins: ["import"], // 解决动态导入语法报错 --> 实际使用eslint-plugin-import的规则解决的
};
- webpack中配置
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
mode: "development",
};
- VSCode Eslint 插件可以在开发阶段就标出错误，但是此时就会对项目所有文件默认进行 Eslint 检查了，dist 目录下的打包后文件就会报错。所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:
.eslintignore
# 忽略dist目录下所有文件
dist
# terser-webpack-plugin
它的工作原理是使用Terser库进行代码压缩和优化，包括删除未使用的代码、注释，以及进行简单的代码混淆等。这有助于减小文件的体积，提升加载速度。
const { resolve } = require('path');
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
entry: './src/js/index.js',
mode: 'production',
optimization: {
splitChunks: {
chunks: 'all'
// 默认值，可以不写~
/* minSize: 30 * 1024, // 分割的chunk最小为30kb
maxSiza: 0, // 最大没有限制
minChunks: 1, // 要提取的chunk最少被引用1次
maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
maxInitialRequests: 3, // 入口js文件最大并行请求数量
automaticNameDelimiter: '~', // 名称连接符
name: true, // 可以使用命名规则
cacheGroups: {
// 分割chunk的组
// node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
// 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
vendors: {
test: /[\\/]node_modules[\\/]/,
// 优先级
priority: -10
},
default: {
// 要提取的chunk最少被引用2次
minChunks: 2,
// 优先级
priority: -20,
// 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
reuseExistingChunk: true
}
}*/
},
// 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
// 解决：修改a文件导致b文件的contenthash变化
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: [
// 配置生产环境的压缩方案：js和css
// 当生产模式会默认开启TerserPlugin，但是如果需要进行其他配置，就要重新写了
new TerserWebpackPlugin({
// 开启缓存
cache: true,
// 开启多进程打包
parallel: true,
// 启动source-map
sourceMap: true
})
]
}
};
# workbox-webpack-plugin
wpa优化 pwa
# wepback插件手写
class TestPlugin {
constructor() {
console.log("TestPlugin constructor()");
}
// 1. webpack读取配置时，new TestPlugin() ，会执行插件 constructor 方法
// 2. webpack创建 compiler 对象
// 3. 遍历所有插件，调用插件的 apply 方法
apply(compiler) {
console.log("TestPlugin apply()");
}
}
module.exports = TestPlugin;
# 注册 hook
class TestPlugin {
constructor() {
console.log("TestPlugin constructor()");
}
// 1. webpack读取配置时，new TestPlugin() ，会执行插件 constructor 方法
// 2. webpack创建 compiler 对象
// 3. 遍历所有插件，调用插件的 apply 方法
apply(compiler) {
console.log("TestPlugin apply()");
// 从文档可知, compile hook 是 SyncHook, 也就是同步钩子, 只能用tap注册
compiler.hooks.compile.tap("TestPlugin", (compilationParams) => {
console.log("compiler.compile()");
});
// 从文档可知, make 是 AsyncParallelHook, 也就是异步并行钩子, 特点就是异步任务同时执行(谁输出的结果快谁先输出)
// 可以使用 tap、tapAsync、tapPromise 注册。
// 如果使用tap注册的话，进行异步操作是不会等待异步操作执行完成的。
compiler.hooks.make.tap("TestPlugin", (compilation) => {
// seal:需要在compilation hooks触发前注册才能使用
compilation.hooks.seal.tap('TestPlugin', ()=>{
console.log('---')
})
setTimeout(() => {
console.log("compiler.make() 111");
}, 2000);
});
// 使用tapAsync、tapPromise注册，进行异步操作会等异步操作做完再继续往下执行
compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => {
setTimeout(() => {
console.log("compiler.make() 222");
// 必须调用
callback();
}, 1000);
});
compiler.hooks.make.tapPromise("TestPlugin", (compilation) => {
console.log("compiler.make() 333");
// 必须返回promise
return new Promise((resolve) => {
resolve();
});
});
// 从文档可知, emit 是 AsyncSeriesHook, 也就是异步串行钩子，特点就是异步任务顺序执行(emit三个事件上面的执行完再去执行下面的)
compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {
setTimeout(() => {
console.log("compiler.emit() 111");
callback();
}, 3000);
});
compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {
setTimeout(() => {
console.log("compiler.emit() 222");
callback();
}, 2000);
});
compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {
setTimeout(() => {
console.log("compiler.emit() 333");
callback();
}, 1000);
});
}
}
module.exports = TestPlugin;
# webpack代码调试
- package.json中配置
{
"name": "source",
"version": "1.0.0",
"scripts": {
// 作用：1进入node环境，2打开后第一行断点，3调用webpack 4.浏览器中查看信息
"debug": "node --inspect-brk ./node_modules/webpack-cli/bin/cli.js"
},
"keywords": [],
"author": "xiongjian",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"css-loader": "^6.7.1",
"loader-utils": "^3.2.0",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}
此时控制台输出以下内容：
PS C:\Users\86176\Desktop\source> npm run debug
> source@1.0.0 debug
> node --inspect-brk ./node_modules/webpack-cli/bin/cli.js
Debugger listening on ws://127.0.0.1:9229/629ea097-7b52-4011-93a7-02f83c75c797
For help, see: https://nodejs.org/en/docs/inspecto
打开 Chrome 浏览器，F12 打开浏览器调试控制台。
# BannerWebpackPlugin
给打包输出文件添加注释。
在loader中手写的banner-loader可在在生产环境中打包后不好查看或者某些清除无用代码给删除了，所以更适合在插件中设置。
开发思路:
- 需要打包输出前添加注释：需要使用 compiler.hooks.emit 钩子, 它是打包输出前触发。
- 如何获取打包输出的资源？compilation.assets(官方新版本不推荐，这里只是演示需要) 可以获取所有即将输出的资源文件。
// plugins/banner-webpack-plugin.js
class BannerWebpackPlugin {
constructor(options = {}) {
this.options = options;
}
apply(compiler) {
// 需要处理文件
const extensions = ["js", "css"];
// emit是异步串行钩子
compiler.hooks.emit.tapAsync("BannerWebpackPlugin", (compilation, callback) => {
// compilation.assets包含所有即将输出的资源
// 通过过滤只保留需要处理的文件
const assetPaths = Object.keys(compilation.assets).filter((path) => {
const splitted = path.split(".");
return extensions.includes(splitted[splitted.length - 1]);
});
assetPaths.forEach((assetPath) => {
const asset = compilation.assets[assetPath];
const source = `/*
* Author: ${this.options.author}
*/\n${asset.source()}`;
// 覆盖资源
compilation.assets[assetPath] = {
// 资源内容
source() {
return source;
},
// 资源大小
size() {
return source.length;
},
};
});
callback();
});
}
}
module.exports = BannerWebpackPlugin;
# CleanWebpackPlugin
在 webpack 打包输出前将上次打包内容清空。
开发思路：
- 如何在打包输出前执行？需要使用 compiler.hooks.emit 钩子, 它是打包输出前触发。
- 如何清空上次打包内容？
- 获取打包输出目录：通过 compiler 对象。
- 通过文件操作清空内容：通过 compiler.outputFileSystem 操作文件。
// plugins/clean-webpack-plugin.js
class CleanWebpackPlugin {
apply(compiler) {
// 获取操作文件的对象
const fs = compiler.outputFileSystem;
// emit是异步串行钩子
compiler.hooks.emit.tapAsync("CleanWebpackPlugin", (compilation, callback) => {
// 获取输出文件目录
const outputPath = compiler.options.output.path;
// 删除目录所有文件
const err = this.removeFiles(fs, outputPath);
// 执行成功err为undefined，执行失败err就是错误原因
callback(err);
});
}
removeFiles(fs, path) {
try {
// 读取当前目录下所有文件
const files = fs.readdirSync(path);
// 遍历文件，删除
files.forEach((file) => {
// 获取文件完整路径
const filePath = `${path}/${file}`;
// 分析文件
const fileStat = fs.statSync(filePath);
// 判断是否是文件夹
if (fileStat.isDirectory()) {
// 是文件夹需要递归遍历删除下面所有文件
this.removeFiles(fs, filePath);
} else {
// 不是文件夹就是文件，直接删除
fs.unlinkSync(filePath);
}
});
// 最后删除当前目录
fs.rmdirSync(path);
} catch (e) {
// 将产生的错误返回出去
return e;
}
}
}
module.exports = CleanWebpackPlugin;
# AnalyzeWebpackPlugin
- 作用：分析 webpack 打包资源大小，并输出分析文件。
- 开发思路: compiler.hooks.emit, 它是在打包输出前触发，我们需要分析资源大小同时添加上分析后的 md 文件。
// plugins/analyze-webpack-plugin.js
class AnalyzeWebpackPlugin {
apply(compiler) {
// emit是异步串行钩子
compiler.hooks.emit.tap("AnalyzeWebpackPlugin", (compilation) => {
// Object.entries将对象变成二维数组。二维数组中第一项值是key，第二项值是value
const assets = Object.entries(compilation.assets);
let source = "# 分析打包资源大小 \n| 名称 | 大小 |\n| --- | --- |";
assets.forEach(([filename, file]) => {
source += `\n| ${filename} | ${file.size()} |`;
});
// 添加资源
compilation.assets["analyze.md"] = {
source() {
return source;
},
size() {
return source.length;
},
};
});
}
}
module.exports = AnalyzeWebpackPlugin;
# InlineRuntimeWebpackPlugin
- 作用：webpack 打包生成的 runtime 文件太小了，额外发送请求性能不好，所以需要将其内联到 js 中，从而减少请求数量。
- 开发思路:
- 需要借助 html-webpack-plugin 来实现
- 在 html-webpack-plugin 输出 index.html 前将内联 runtime 注入进去
- 删除多余的 runtime 文件
// plugins/inline-chunk-webpack-plugin.js
const HtmlWebpackPlugin = require("safe-require")("html-webpack-plugin");
class InlineChunkWebpackPlugin {
constructor(tests) {
this.tests = tests;
}
apply(compiler) {
compiler.hooks.compilation.tap("InlineChunkWebpackPlugin", (compilation) => {
const hooks = HtmlWebpackPlugin.getHooks(compilation);
hooks.alterAssetTagGroups.tap("InlineChunkWebpackPlugin", (assets) => {
assets.headTags = this.getInlineTag(assets.headTags, compilation.assets);
assets.bodyTags = this.getInlineTag(assets.bodyTags, compilation.assets);
});
hooks.afterEmit.tap("InlineChunkHtmlPlugin", () => {
Object.keys(compilation.assets).forEach((assetName) => {
if (this.tests.some((test) => assetName.match(test))) {
delete compilation.assets[assetName];
}
});
});
});
}
getInlineTag(tags, assets) {
return tags.map((tag) => {
if (tag.tagName !== "script") return tag;
const scriptName = tag.attributes.src;
if (!this.tests.some((test) => scriptName.match(test))) return tag;
return { tagName: "script", innerHTML: assets[scriptName].source(), closeTag: true };
});
}
}
module.exports = InlineChunkWebpackPlugin;
← loader Entry&&Output →