webpack 配置
1. entry（入口）
指示 Webpack 从哪个文件开始打包
- 单文件入口
// 入口
entry: "./src/main.js", // 相对路径
- 多文件入口
当 客户端项目和后台管理项目 放在一个项目中，多入口就会起到作用。通过不同的入口运行不同的项目。
// 有多个入口文件
entry: {
app: "./src/app.js",
main: "./src/main.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
}
2. output（出口）
指示 Webpack 打包完的文件输出到哪里去，如何命名等
- 生产环境 output 配置
需要配置输出、需要配置hash 缓存作用
// 输出
output: {
// 所有文件的输出路径
// __dirname nodejs的变量，代表当前文件的文件夹目录
path: path.resolve(__dirname, "../dist"), // 绝对路径
// 入口文件打包输出文件名
filename: "static/js/[name].[contenthash:10].js",
// 给打包输出的其他文件命名
chunkFilename: "static/js/[name].chunk.[contenthash:10].js",
// 图片、字体等通过type:asset处理资源命名方式
assetModuleFilename: "static/media/[hash:10][ext][query]",
// 自动清空上次打包的内容
// 原理：在打包前，将path整个目录内容清空，再进行打包
clean: true,
},
- 开发环境 output 配置
无需配置输出，无需配置模块的hash防止缓存，
output: {
// 所有文件的输出路径
// 开发模式没有输出
path: undefined,
// 入口文件打包输出文件名
filename: "static/js/[name].js",
// 给打包输出的其他文件命名
chunkFilename: "static/js/[name].chunk.js",
// 图片、字体等通过type:asset处理资源命名方式
assetModuleFilename: "static/media/[hash:10][ext][query]",
// 自动清空上次打包的内容
// 原理：在打包前，将path整个目录内容清空，再进行打包
clean: true,
},
- 将上面两个文件抽到一个文件中
// 获取cross-env定义的环境变量
const isProduction = process.env.NODE_ENV === "production";
output: {
path: isProduction ? path.resolve(__dirname, "../dist") : undefined,
filename: isProduction ? "static/js/[name].[contenthash:10].js" : "static/js/[name].js",
chunkFilename: isProduction ? "static/js/[name].[contenthash:10].chunk.js" : "static/js/[name].chunk.js",
assetModuleFilename: "static/media/[hash:10][ext][query]",
clean: true,
},
3. module（加载器）
webpack 本身只能处理 js、json 等资源，其他资源（css、less、sass、ts、vue、图片、字体）需要借助 loader，Webpack 才能解析
- 生产环境 module 配置
无需配置 HMR、需要配置MiniCssExtractPlugin.loader 提取css成单独文件
//抽离出的公共方法 用来获取处理样式的loader
function getStyleLoader(pre) {
return [
MiniCssExtractPlugin.loader, // 提取css成单独文件
"css-loader", // 将css资源编译成commonjs的模块到js中
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
pre,
].filter(Boolean);
}
rules: [
// loader的配置
{
oneOf: [ // oneOf 如果当前的文件命中了，那么不在向下继续查找，否则继续查找。oneOf 作用：提高效率
{
test: /\.css$/, // 只检测.css文件
use: getStyleLoader(), // 执行顺序：从右到左（从下到上）
},
{
test: /\.less$/,
// loader: 'xxx', // 只能使用1个loader
use: getStyleLoader("less-loader"),
},
{
test: /\.s[ac]ss$/,
use: getStyleLoader("sass-loader"),
},
{
test: /\.styl$/,
use: getStyleLoader("stylus-loader"),
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
// 小于10kb的图片转base64
// 优点：减少请求数量 缺点：体积会更大
maxSize: 10 * 1024, // 10kb
},
},
// generator: {
// // 输出图片名称
// // [hash:10] hash值取前10位
// filename: "static/images/[hash:10][ext][query]",
// },
},
{
test: /\.(ttf|woff2?|map3|map4|avi)$/,
type: "asset/resource",
// generator: {
// // 输出名称
// filename: "static/media/[hash:10][ext][query]",
// },
},
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理
include: path.resolve(__dirname, "../src"), // 只处理src下的文件，其他文件不处理
use: [
{
loader: "thread-loader", // 开启多进程
options: {
works: threads, // 进程数量
},
},
{
loader: "babel-loader",
options: {
// presets: ["@babel/preset-env"],
cacheDirectory: true, // 开启babel缓存
cacheCompression: false, // 关闭缓存文件压缩
plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
},
},
],
},
],
},
],
- 开发环境 module 配置
无需将 style-loader 改成（MiniCssExtractPlugin.loader 提取css成单独文件）
rules: [
// loader的配置
{
// 每个文件只能被其中一个loader配置处理
oneOf: [
{
test: /\.css$/, // 只检测.css文件
use: [
// 执行顺序：从右到左（从下到上）
"style-loader", // 将js中css通过创建style标签添加html文件中生效
"css-loader", // 将css资源编译成commonjs的模块到js中
],
},
{
test: /\.less$/,
// loader: 'xxx', // 只能使用1个loader
use: [
// 使用多个loader
"style-loader",
"css-loader",
"less-loader", // 将less编译成css文件
],
},
{
test: /\.s[ac]ss$/,
use: [
"style-loader",
"css-loader",
"sass-loader", // 将sass编译成css文件
],
},
{
test: /\.styl$/,
use: [
"style-loader",
"css-loader",
"stylus-loader", // 将stylus编译成css文件
],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
// 小于10kb的图片转base64
// 优点：减少请求数量 缺点：体积会更大
maxSize: 10 * 1024, // 10kb
},
},
// generator: {
// // 输出图片名称
// // [hash:10] hash值取前10位
// filename: "static/images/[hash:10][ext][query]",
// },
},
{
test: /\.(ttf|woff2?|map3|map4|avi)$/,
type: "asset/resource",
// generator: {
// // 输出名称
// filename: "static/media/[hash:10][ext][query]",
// },
},
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理
include: path.resolve(__dirname, "../src"), // 只处理src下的文件，其他文件不处理
use: [
{
loader: "thread-loader", // 开启多进程
options: {
works: threads, // 进程数量
},
},
{
loader: "babel-loader",
options: {
// presets: ["@babel/preset-env"],
cacheDirectory: true, // 开启babel缓存
cacheCompression: false, // 关闭缓存文件压缩
plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
},
},
],
},
],
},
],
- 将上面两个文件抽到一个文件中
// //抽离出的公共方法 用来获取处理样式的loader 返回处理样式loader函数
const getStyleLoaders = (pre) => {
return [
isProduction ? MiniCssExtractPlugin.loader : "style-loader",
"css-loader",
{
// 处理css兼容性问题
// 配合package.json中browserslist来指定兼容性
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env"],
},
},
},
pre && { // 加载less sass stylus 等loader
loader: pre,
options:
pre === "less-loader"
? {
// antd自定义主题配置
// 主题色文档：https://ant.design/docs/react/customize-theme-cn#Ant-Design-%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%8F%98%E9%87%8F
lessOptions: {
modifyVars: { "@primary-color": "#1DA57A" },
javascriptEnabled: true,
},
}
: {},
},
].filter(Boolean);
};
module: {
rules: [
// 处理css
{
oneOf: [
// oneOf 如果当前的文件命中了，那么不在向下继续查找，否则继续查找。oneOf 作用：提高效率
{
test: /\.css$/,
use: getStyleLoaders(),
},
{
test: /\.less$/,
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
{
test: /\.styl$/,
use: getStyleLoaders("stylus-loader"),
},
// 处理图片
{
test: /\.(jpe?g|png|gif|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024,
},
},
},
// 处理其他资源
{
test: /\.(woff2?|ttf)$/,
type: "asset/resource",
},
// 处理js
{
test: /\.jsx?$/,
include: path.resolve(__dirname, "../src"),
use: [
{
loader: "thread-loader", // 开启多进程
options: {
works: threads, // 进程数量
},
},
{
loader: "babel-loader",
options: {
// presets: ["@babel/preset-env"],
cacheDirectory: true, // 开启babel缓存
cacheCompression: false, // 关闭缓存文件压缩
plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
},
},
],
options: {
cacheDirectory: true,
cacheCompression: false,
plugins: [
!isProduction && "react-refresh/babel", // 激活js的HMR
].filter(Boolean),
},
},
],
},
],
},
- loader 执行顺序
use 数组中的 loader 从右到左执行，从下到上，进行执行的。由于我们需要先使用css-loader解析css，然后使用style-loader将解析后的css插入的页面当中，因此书写顺序不能乱
- pre：前置loader 优先级最高
- normal：普通loader 优先级其次（默认 正常处理）
- inline：内联loader 优先级次
- post：后置loader 优先级最低
module: {
rules: [
{
test: /\.less$/,
use: 'less-loader',
enforce: 'pre'
},
{
test: /\.less$/,
use: 'css-loader'
},
{
test: /\.less$/,
use: 'style-loader',
enforce: 'post'
}
]
},
- 常见 loader 介绍
-
style-loader： 将模块 ( import ) 导出的内容作为样式并添加到 DOM 中 -
css-loader：css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。 -
less-loader：加载并编译 LESS 文件 为 css 文件 -
sass-loader：加载并编译 SASS/SCSS 文件 为 css 文件 -
stylus-loader：加载并编译 Stylus 文件 为 css 文件 -
babel-loader：向下兼容javaScript 使用 Bable 加载 ES6 代码并将其转换为ES5 -
postcss-loader：向下兼容 使css中的样式可以兼容不同浏览器和不同的浏览器版本 -
ts-loader：像加载 JavaScript 一样加载 TypeScript 2.0+ -
vue-loader：加载并编译VUE组件 -
thread-loader：对于webpack打包时使用的thread-loader，其工作原理是利用多线程对代码进行并行处理，从而提高构建速度。具体地说，thread-loader会将来自webpack的任务分配给不同的线程并行执行，以减少构建的时间。 -
node-loader：处理 Node.js 插件（add-ons） 的 loader。 -
asset：包含了如下--
asset/resource：将资源文件输出到指定的输出目录，作用等同于file-loader--
asset/inline：将资源文件内容以指定的格式进行编码（一般为 base64），然后以 data URI 的形式嵌入到生成的 bundle 中，作用等同于url-loader--
asset/source：将资源文件的内容以字符串的形式嵌入到生成的 bundle 中，作用相当于raw-loader--
asset：作用等同于设置了 limit 属性的 url-loader，即资源文件的大小如果小于 limit 的值（默认值为 8kb），则采用 asset/inline 模式，否则采用 asset/resource 模式
-
loader 原理当webpack解析资源时，会调用相应的loader去处理，调用顺序就是先下后上，先右后左
- loader 其实本身就是一个函数 接受的参数有三个：
- content 文件内容
- map source-map （映射）
- meta 别的loader传递的数据
/* loader就是一个函数 当webpack解析资源时，会调用相应的loader去处理 loader接受到文件内容作为参数，返回内容出去 content 文件内容 map SourceMap meta 别的loader传递的数据 */ module.exports = function (content, map, meta) { console.log(content); return content; };-
loader 原理之 ---- 分类
同步 loader
module.exports = function (content, map, meta) { return content; };module.exports = function (content, map, meta) { // 传递map，让source-map不中断 // 传递meta，让下一个loader接收到其他参数 this.callback(null, content, map, meta); return; // 当调用 callback() 函数时，总是返回 undefined };异步 loader（处理异步loader）
由于同步计算过于耗时，在 Node.js 这样的单线程环境下进行此操作并不是好的方案，我们建议尽可能地使你的 loader 异步化。但如果计算量很小，同步 loader 也是可以的。
module.exports = function (content, map, meta) { const callback = this.async(); // 这边固定写法 // 进行异步操作 setTimeout(() => { callback(null, resultContent, map, meta); }, 1000); };- Raw loader （处理图片和字体等二进制文件）
默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。通过设置 raw 为 true，loader 可以接收原始的 Buffer。
module.exports = function (content) { // content是一个Buffer数据 return content; }; module.exports.raw = true; // 开启 Raw Loaderpitching loader（改变loader执行顺序）
pitching loader的一个作用是可以共享数据。pitch的第三个参数data，会暴露给loader的this.data。另一个作用是当一个
loader的pitch方法返回非undefined时，会中断后面loader的执行正常代码
module.exports = { // ... module: { rules: [ { use: ['a-loader', 'b-loader', 'c-loader'], } ] } }正常运行结果
|- a-loader `pitch` |- b-loader `pitch` |- c-loader `pitch` |- requested module is picked up as a dependency |- c-loader normal execution |- b-loader normal execution |- a-loader normal execution创建 pitching loader
module.exports = function (content) { return someSyncOperation(content) } module.exports.pitch = function () { return 'export {}' }当使用了pitching loader，则
loader的执行顺序会缩减为：|- a-loader `pitch` |- b-loader `pitch` returns a module |- a-loader normal execution -
手写loader
- 手写 babel-loader
const babel = require("@babel/core"); const schema = require("./schema.json"); // https://www.babeljs.cn/docs/babel-core module.exports = function (content) { const callback = this.async(); // 异步loader const options = this.getOptions(schema); // 这边获取 webpack.config.js 当前 loader 的配置 其中参数是配置详细 // 使用babel对代码进行编译 babel.transform(content, options, function (err, result) { if (err) callback(err); // 是否编译失败 else callback(null, result.code); // 回调函数 result.code 是当前文件内容 result.map 映射 ast 类似文件参数 }); };使用 babel-loader
module: rules: [ { test: /\.jsx?$/, loader: "./loaders/babel-loader", options:[ presets:["@babel/preset-env"] ] } ] }- 手写 file-loader
const loaderUtils = require("loader-utils"); module.exports = function (content) { // 1. 根据文件内容生成带hash值文件名 let interpolatedName = loaderUtils.interpolateName(this, "[hash].[ext][query]", { content, }); interpolatedName = `images/${interpolatedName}` // console.log(interpolatedName); // 2. 将文件输出出去 this.emitFile(interpolatedName, content); // 3. 返回：module.exports = "文件路径（文件名）" return `module.exports = "${interpolatedName}"`; }; // 需要处理图片、字体等文件。它们都是buffer数据 // 需要使用raw loader才能处理 module.exports.raw = true;使用 file-loader
module: rules: [ { test: /\.(png|jpe?g|gif)$/, loader: "./loaders/file-loader", type: "javaScript/auto", } ] }- 手写 style-loader
module.exports = function (content) { /* 1. 直接使用style-loader，只能处理样式 不能处理样式中引入的其他资源 use: ["./loaders/style-loader"], 2. 借助css-loader解决样式中引入的其他资源的问题 use: ["./loaders/style-loader", "css-loader"], 问题是css-loader暴露了一段js代码，style-loader需要执行js代码，得到返回值，再动态创建style标签，插入到页面上 不好操作 3. style-loader使用pitch loader用法 */ // const script = ` // const styleEl = document.createElement('style'); // styleEl.innerHTML = ${JSON.stringify(content)}; // document.head.appendChild(styleEl); // `; // return script; }; module.exports.pitch = function (remainingRequest) { // remainingRequest 剩下还需要处理的loader // console.log(remainingRequest); // C:\Users\86176\Desktop\webpack\source\node_modules\css-loader\dist\cjs.js!C:\Users\86176\Desktop\webpack\source\src\css\index.css // 1. 将 remainingRequest 中绝对路径改成相对路径（因为后面只能使用相对路径操作） const relativePath = remainingRequest .split("!") .map((absolutePath) => { // 返回相对路径 return this.utils.contextify(this.context, absolutePath); }) .join("!"); // console.log(relativePath); // ../../node_modules/css-loader/dist/cjs.js!./index.css // 2. 引入css-loader处理后的资源 // 3. 创建style，将内容插入页面中生效 const script = ` import style from "!!${relativePath}"; const styleEl = document.createElement('style'); styleEl.innerHTML = style; document.head.appendChild(styleEl); `; // 中止后面loader执行 return script; };
- loader 其实本身就是一个函数 接受的参数有三个：
4. pulgins（插件）
Webpack 拥有丰富的插件接口。webpack 自身的大部分功能都使用这些插件接口。这使得 webpack 很灵活。
-
常见 pulgin 介绍-
eslint-webpack-plugin： webpack 的 ESLint 插件 -
html-webpack-plugin：快速创建HTML文件来服务bundles (每次打包，会创建一个新的html， 并且将 js 和css 自动引入) -
mini-css-extract-plugin：为每一个包含了 CSS 的 JS 文件创建一个 CSS 文件（不再直接创建<style></style>，而是使用<Link>引入）优点：Link 引入，会先加载css样式文件，后加载js 提高加载速度，防止页面闪烁
-
css-minimizer-webpack-plugin：用于压缩 css 代码 -
terser-webpack-plugin：用于压缩 js 代码 -
image-minimizer-webapck-plugin：用于压缩 image 代码 -
html-minimizer-webpack-plugin：用于压缩 html 代码 -
copy-webpack-plugin：将已存在的单个文件或整个目录复制到构建目录。
-
-
pulgin 原理
webpack 在编译代码过程中，会触发一些列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了
-
Webpack 内部的钩子钩子本质就是：事件。为了方便我们直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做：hooks ( 钩子 )。开发插件，离不开这些钩子
TapableTapable为 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 hooks 文档
Compiler 对象中保存着完整的 webpack 环境配置，每次启动 webpack 构建时它都是一个独一无二，仅仅会创建一次的对象。
compiler 对象记录了 webpack 运行环境的所有的信息，插件可以通过它获取到 webpack 的配置信息，如
entry、output、module等配置。compiler对象记录着构建过程中webpack环境与配置信息，整个webpack从开始到结束的生命周期。针对的是webpack。Compiler 主要属性：
-
compiler.options可以访问本次启动 webpack 时候所有的配置文件，包括但不限于 loaders 、 entry 、 output 、 plugin 等等完整配置信息。 -
compiler.inputFileSystem和compiler.outputFileSystem可以进行文件操作，相当于 Nodejs 中 fs。 -
compiler.hooks可以注册 tapable 的不同种类 Hook，从而可以在 compiler 生命周期中植入不同的逻辑。
-
Compilation compilation hooks 文档
compilation 对象代表一次资源的构建，compilation 实例能够访问所有的模块和它们的依赖。
一个 compilation 对象会对构建依赖图中所有模块，进行编译。 在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(restore)。
简单来说，
Compilation的职责就是对所有 require 图(graph)中对象的字面上的编译，编译构建 module 和 chunk，并调用插件构建过程，同时把本次构建编译的内容全存到内存里。compilation 编译可以多次执行，如在watch模式下启动 webpack，每次监测到源文件发生变化，都会重新实例化一个compilation对象，从而生成一组新的编译资源对象。这个对象可以访问所有的模块和它们的依赖compilation对象记录编译模块的信息，只要项目文件有改动，compilation就会被重新创建。针对的是随时可变的项目文件。Compilation 主要属性：
-
compilation.modules可以访问所有模块，打包的每一个文件都是一个模块。 -
compilation.chunkschunk 即是多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个 chunk，通过代码分割的模块又是另外的 chunk。 -
compilation.assets可以访问本次打包生成所有文件的结果。 -
compilation.hooks可以注册 tapable 的不同种类 Hook，用于在 compilation 编译模块阶段进行逻辑添加以及修改。
-
plugin 如何创建- 最简单的插件
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;- 使用 Compiler 创建
/* 1. webpack加载webpack.config.js中所有配置，此时就会new TestPlugin(), 执行插件的constructor 2. webpack创建compiler对象 3. 遍历所有plugins中插件，调用插件的apply方法 4. 执行剩下编译流程（触发各个hooks事件） */ 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) => { 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, 也就是异步串行钩子，特点就是异步任务顺序执行 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;- 使用 Compilation 创建
// 由文档可知，make是异步并行钩子 AsycParallelHook compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => { // 需要在 compilation hooks 触发前注册才能使用 compilation.hooks.seal.top("TestPlugin",()=>{ console.log("TestPlugin seal") }) setTimeout(() => { console.log("compiler.emit() 333"); callback(); }, 1000); }); -
手写 plugin-
html-webpack-plugin
- 原理：
- 代码：
// 该代码是将文件较小的js文件，从script src 改成 行内 script 引入 const HtmlWebpackPlugin = require("safe-require")("html-webpack-plugin"); class InlineChunkWebpackPlugin { constructor(tests) { this.tests = tests; } apply(compiler) { compiler.hooks.compilation.tap("InlineChunkWebpackPlugin", (compilation) => { // 1. 获取html-webpack-plugin的hooks const hooks = HtmlWebpackPlugin.getHooks(compilation); // 2. 注册 html-webpack-plugin的hooks -> alterAssetTagGroups hooks.alterAssetTagGroups.tap("InlineChunkWebpackPlugin", (assets) => { // 3. 从里面将script的runtime文件，变成inline script assets.headTags = this.getInlineChunk(assets.headTags, compilation.assets); assets.bodyTags = this.getInlineChunk(assets.bodyTags, compilation.assets); }); // 删除runtime文件 hooks.afterEmit.tap("InlineChunkWebpackPlugin", () => { // 3. 从里面将script的runtime文件，变成inline script Object.keys(compilation.assets).forEach((filepath) => { if (this.tests.some((test) => test.test(filepath))) { delete compilation.assets[filepath]; } }); }); }); } getInlineChunk(tags, assets) { /* 目前：[ { tagName: 'script', voidTag: false, meta: { plugin: 'html-webpack-plugin' }, attributes: { defer: true, type: undefined, src: 'js/runtime~main.js.js' } }, ] 修改为： [ { tagName: 'script', innerHTML: runtime文件的内容 closeTag: true }, ] */ return tags.map((tag) => { if (tag.tagName !== "script") return tag; // 获取文件资源路径 const filepath = tag.attributes.src; if (!filepath) return tag; if (!this.tests.some((test) => test.test(filepath))) return tag; return { tagName: "script", innerHTML: assets[filepath].source(), closeTag: true, }; }); } } module.exports = InlineChunkWebpackPlugin;plugins: [ new InlineChunkWebpackPlugin([/runtime(.*)\.js/]), ] -
banner-webpack-plugin
class BannerWebpackPlugin { constructor(options = {}) { this.options = options; } apply(compiler) { // 在资源输出之前触发 compiler.hooks.emit.tap("BannerWebpackPlugin", (compilation) => { // debugger; const extensions = ["css", "js"]; // 1. 获取即将输出的资源文件：compilation.assets // 2. 过滤只保留js和css资源 const assets = Object.keys(compilation.assets).filter((assetPath) => { // 将文件名切割 ['xxxx', 'js'] ['xxxx', 'css'] const splitted = assetPath.split("."); // 获取最后一个文件扩展名 const extension = splitted[splitted.length - 1]; // 判断是否保护 return extensions.includes(extension); }); const prefix = `/* * Author: ${this.options.author} */ `; // 3. 遍历剩下资源添加上注释 // console.log(assets); assets.forEach((asset) => { // 获取原来内容 const source = compilation.assets[asset].source(); // 拼接上注释 const content = prefix + source; // 修改资源 compilation.assets[asset] = { // 最终资源输出时，调用source方法，source方法的返回值就是资源的具体内容 source() { return content; }, // 资源大小 size() { return content.length; }, }; }); }); } } module.exports = BannerWebpackPlugin;- clean-webapck-plugin
class CleanWebpackPlugin { apply(compiler) { // 2. 获取打包输出的目录 const outputPath = compiler.options.output.path; const fs = compiler.outputFileSystem; // 1. 注册钩子：在打包输出之前 emit compiler.hooks.emit.tap("CleanWebpackPlugin", (compilation) => { // 3. 通过fs删除打包输出的目录下的所有文件 this.removeFiles(fs, outputPath); }); } removeFiles(fs, filepath) { // 想要删除打包输出目录下所有资源，需要先将目录下的资源删除，才能删除这个目录 // 1. 读取当前目录下所有资源 const files = fs.readdirSync(filepath); // console.log(files); // [ 'images', 'index.html', 'js' ] // 2. 遍历一个个删除 files.forEach((file) => { // 2.1 遍历所有文件，判断是文件夹还是文件 const path = `${filepath}/${file}`; const fileStat = fs.statSync(path); // console.log(fileStat); if (fileStat.isDirectory()) { // 2.2 是文件夹，就得删除下面所有文件，才能删除文件夹 this.removeFiles(fs, path); } else { // 2.3 是文件，直接删除 fs.unlinkSync(path); } }); } } module.exports = CleanWebpackPlugin;- inline-webpack-plugin
const HtmlWebpackPlugin = require("safe-require")("html-webpack-plugin"); class InlineChunkWebpackPlugin { constructor(tests) { this.tests = tests; } apply(compiler) { compiler.hooks.compilation.tap("InlineChunkWebpackPlugin", (compilation) => { // 1. 获取html-webpack-plugin的hooks const hooks = HtmlWebpackPlugin.getHooks(compilation); // 2. 注册 html-webpack-plugin的hooks -> alterAssetTagGroups hooks.alterAssetTagGroups.tap("InlineChunkWebpackPlugin", (assets) => { // 3. 从里面将script的runtime文件，变成inline script assets.headTags = this.getInlineChunk(assets.headTags, compilation.assets); assets.bodyTags = this.getInlineChunk(assets.bodyTags, compilation.assets); }); // 删除runtime文件 hooks.afterEmit.tap("InlineChunkWebpackPlugin", () => { // 3. 从里面将script的runtime文件，变成inline script Object.keys(compilation.assets).forEach((filepath) => { if (this.tests.some((test) => test.test(filepath))) { delete compilation.assets[filepath]; } }); }); }); } getInlineChunk(tags, assets) { /* 目前：[ { tagName: 'script', voidTag: false, meta: { plugin: 'html-webpack-plugin' }, attributes: { defer: true, type: undefined, src: 'js/runtime~main.js.js' } }, ] 修改为： [ { tagName: 'script', innerHTML: runtime文件的内容 closeTag: true }, ] */ return tags.map((tag) => { if (tag.tagName !== "script") return tag; // 获取文件资源路径 const filepath = tag.attributes.src; if (!filepath) return tag; if (!this.tests.some((test) => test.test(filepath))) return tag; return { tagName: "script", innerHTML: assets[filepath].source(), closeTag: true, }; }); } } module.exports = InlineChunkWebpackPlugin; -
5. optimization（优化）
webpack5 中 optimization 的配置是用来优化打包后的代码的，可以通过配置不同的选项来实现不同的优化效果。其中包括了如下几个选项：
多种配置选项 （未写完全部选项，更多选项请去官方查看：webpack.docschina.org/configurati…
-
minimize
是否压缩代码，默认为true
-
minimizer
压缩后的代码体积减小，传输速度快，从而提升网页加速速度和减少网络传输流量。 除此之外，还具有混淆源码的作用，由于压缩后的代码可读性非常差
压缩代码的插件，可以配置多个 （ 例如：css压缩插件、图片压缩插件、html压缩插件）
【压缩工作内容】-
- 删除代码注释
-
- 删除无意义或者多余的空白（如空格，制表符，回车，换行）
-
- 把较长的变量名称和过程名称统一替换为很短的名称
-
- 解析程序逻辑：合并声明以及布尔值简化
-
- 解析程序逻辑: 编译预计算
- 等等。。。
minimizer: [ new CssMinimizerWebpackPlugin(),// css 压缩 new TerserWebpackPlugin({ parallel: threads, // 开启多进程和设置进程数量 }), // js 压缩 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", }, }, ], }, ], ], }, }, }), ], -
-
splitChunks
代码分割，将公共代码提取出来，避免重复打包
splitChunks:{ chunks: "all", cacheGroups: { // react react-dom react-router-dom 一起打包成一个js文件 react: { test: /[\\/]node_modules[\\/]react(.*)?[\\/]/, name: "chunk-react", priority: 40, }, // antd 单独打包 antd: { test: /[\\/]node_modules[\\/]antd[\\/]/, name: "chunk-antd", priority: 30, }, // 剩下node_modules单独打包 libs: { test: /[\\/]node_modules[\\/]/, name: "chunk-libs", priority: 20, }, }, } -
runtimeChunk
将当前模块记录其他模块的hash值单独打包成一个文件runtime,能够保证其他文件的持久化
runtimeChunk:{ name: (entrypoint)=> `runtime-${entrypoint}.js` } -
moduleIds
模块ID的生成方式，默认为 “ natural ”，可以配置为 “ named ” 或 “ hashed ”
-
chunkIds
代码块ID的生成方式，默认 “ natural ”，可以配置为 “ named ” 或 “ hashed ”
-
usedExports
是否只导出被使用的代码
-
sideEffects
是否开启副作用标记。用于tree shaking
-
concatenateModules
是否开启模块合并
6. devtool
此选项控制是否生成，以及如何生成 source map。
-
开发模式
cheap-module-source-map- 优点：打包编辑速度快，只包含行映射
- 缺点：没有列映射
-
生产模式
source-map- 优点：包含行/列映射
- 缺点：打包编辑速度更慢了
{
devtool: "source-map"
}
映射问题：1. 拖累打包速度, 2. 生产环境，代码不安全
7. devserver（开发服务器）
自动化 & 热更新
devServer: { // 开发服务器：不会输出资源，其在内存中编译打包
host: "localhost", // 域名
port: 3000, // 端口
open: true, // 自动打开默认浏览器
hot: true, // 开启HMR
historyApiFallback: true, // 解决前端路由刷新404问题
},
vue和react 可以使用第三方插件或loader 来进行热更新
8. mode（模式）
development(开发环境) 和 production(生产环境) 和 none(默认production) 这三个参数, 其中开发和生产两个环境下的构建目标存在着巨大差异。
在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(模块热替换) 能力的 localhost server。
在生产环境中，目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。
虽然，以上我们将 生产环境 和 开发环境 做了细微区分，但是，请注意，我们还是会遵循不重复原则(Don't repeat yourself - DRY)，保留一个 "common(通用)" 配置。
为了将公共config和生产config和开发config 配置合并在一起，我们将使用一个名为
webpack-merge的工具。此工具会引用 "common" 配置，因此我们不必再在环境特定(environment-specific)的配置中编写重复代码。
配置文件抽离公共
我们先从安装 webpack-merge 开始，并将之前指南中已经成型的那些代码进行分离：
npm install --save-dev webpack-merge
project
webpack-demo
|- package.json
|- package-lock.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
|- /dist
|- /src
|- index.js
|- math.js
|- /node_modules
webpack.common.js
+ const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+ module.exports = {
+ entry: {
+ app: './src/index.js',
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Production',
+ }),
+ ],
+ output: {
+ filename: '[name].bundle.js',
+ path: path.resolve(__dirname, 'dist'),
+ clean: true,
+ },
+ };
webpack.dev.js
+ const { merge } = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+ mode: 'development',
+ devtool: 'inline-source-map',
+ devServer: {
+ static: './dist',
+ },
+ });
webpack.prod.js
+ const { merge } = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+ mode: 'production',
+ });
使用：
package.json
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
- "start": "webpack serve --open",
+ "start": "webpack serve --open --config webpack.dev.js",
- "build": "webpack"
+ "build": "webpack --config webpack.prod.js"
},
【优化点】缩小构建目标
Webpack 启动后会从配置的 entry 出发，解析出文件中的导入语句，再递归的解析。 在遇到导入语句时 Webpack 会做两件事情:
-
根据导入语句去寻找对应的要导入的文件。例如
require('react')导入语句对应的文件是./node_modules/react/react.js；require('./util')对应的文件是./util.js。 -
根据找到的要导入文件的后缀，使用配置中的
loader去处理文件。例如使用 ES6 开发的 JavaScript 文件需要使用babel-loader去处理。
以上两件事情虽然对于处理一个文件非常快，但是当项目大了以后文件量会变的非常多，这时候构建速度慢的问题就会暴露出来。 虽然以上两件事情无法避免，但需要尽量减少以上两件事情的发生，以提高速度。
【优化点】缩小构建目标 -之- 减少文件搜索范围
-
优化
resolve.modules配置：通过指定解析模块所在的目录，以减少模块搜索层级 -
优化
resolve.extensions配置：自动解析确认的后缀扩展 -
合理使用
alias：当我们代码出现import时，Webpack 会采用向上递归搜索的方式去node_modules目录下找。为了减少搜索范围我们可以直接告诉 Webpack 去哪个路径下查找。 -
noParse：当我们的代码使用到import jQuery from 'jquery'是，Webpack 会解析 React 这个库是否有依赖其他包。但是我们对类似 jQuery 这类依赖库，一般会认为不会引用其他的包。该属性告诉 Webpack 不用解析某些包。
module.exports = {
module: {
noParse: /jQuery/,
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
include: [path.resolve(__dirname, 'src')],
exclude: /node_modules/,
},
{
test: /\.(jpe?g|png|gif)$/,
use: {
loader: 'url-loader',
include: [path.resolve(__dirname, 'src/assets/icons')],
exclude: /node_modules/,
},
},
],
},
resolve: {
// 创建 import 或 require 的别名，来确保模块引入变得更简单
alias: {
react: path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
},
// 告诉 Webpack 解析模块时应该搜索的目录
modules: [path.resolve(__dirname, 'node_modules')],
// 自动解析确定的扩展
extensions: ['.js'],
// 当从 npm 包导入模块时，此选项将决定在 `package.json` 中使用哪个字段导入模块
// 默认值为 browser -> module -> main
mainFields: ['main'],
},
};
【优化点】缩小构建目标 -之- IgnorePlugin
Webpack 的内置插件，作用是忽略第三方包指定目录。
例如: moment.js (2.24.0 版本) 会将所有本地化内容和核心功能一起打包，我们就可以使用 IgnorePlugin 在打包时忽略本地化内容。
//webpack.config.js
module.exports = {
//...
plugins: [
//忽略 moment 下的 ./locale 目录
new webpack.IgnorePlugin(/^./locale$/, /moment$/),
],
};
在使用的时候，如果我们需要指定语言，那么需要我们手动的去引入语言包，例如，引入中文语言包:
import moment from 'moment';
// 手动引入
import 'moment/locale/zh-cn';
index.js 中只引入 moment.js，打包出来的 bundle.js 大小为 263KB，如果配置了 IgnorePlugin，单独引入 moment/locale/zh-cn，构建出来的包大小为 55KB。
【优化点】预编译资源模块 -之- ## 脚本外链分包
通过配置字段 externals 配置通过外链接入的第三方模块包。将 react、react-dom 等基础包通过 CDN 引入，不打入 bundle 中。
配置示例：
module.exports = {
//...
externals: {
jquery: 'jQuery',
},
};
【优化点】Eslint和Babel的缓存
在 Webpack 中基于万物皆模块的思想，所谓的
loader其实就是把一个模块转换成另一种形式的模块，甚至可以简单的理解 Webpack 中的loader其实就是对文本字符串的处理，给指定的loader一个input，loader还你一个output，有点函数式编程的内味了。因此所谓的babel-loader其实就是把一段 JavaScript 字符串转换成另一端 JavaScript 字符串。基于以上的前提，因此只要在转换的时候，记录下转换前的文件和转换后的文件，然后对比文件是否有改动，如果文件没有改动那就继续拿上次转换之后的文件，所以就跳过这一次转换的过程，大大提高了速度。
babel-loader
babel-loader 提供
cacheDirectory字段启用转换结果缓存的功能，开启时缓存会存放在node_modules/.cache/babel-loader目录下。
// webpack.config.js loader
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理
include: path.resolve(__dirname, "../src"), // 只处理src下的文件，其他文件不处理
use: [
{
loader: "thread-loader", // 开启多进程
options: {
works: threads, // 进程数量
},
},
{
loader: "babel-loader",
options: {
// presets: ["@babel/preset-env"],
cacheDirectory: true, // 开启babel缓存
cacheCompression: false, // 关闭缓存文件压缩
plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
},
},
],
},
eslint-webpack-plugin
eslint-webpack-plugin 提供
cache字段启缓存的功能
// webpack.config.js plugins
new ESLintPlugin({
// 检测哪些文件
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"), // 缓存的位置
threads, // 开启多进程和设置进程数量
}),
cache-loader
在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中。默认保存在
node_modueles/.cache/cache-loader目录下。
注意：将此加载器添加到其他（昂贵的）加载器之前，以将结果缓存在磁盘上。
配置示例：
module.exports = {
module: {
rules: [
{
test: /.ext$/,
use: ['cache-loader', ...loaders],
include: path.resolve('src'),
},
],
},
};
【优化点】启动多线程
影响前端发布速度的有两个方面，一个是构建，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间。
多进程打包，开启电脑的多个进程同时干一件事情，速度更快
-
thread-loader实现原理：
-
每次 Webpack 解析一个模块，
thread-loader会将它及它的依赖分配给 worker 线程中 -
把这个
loader放置在其他 loader 之前，放置在这个loader之后的loader就会在一个单独的 worker 池（worker pool）中运行
-
-
在 worker 池（worker pool）中运行的
loader是收到限制的。例如：-
这些
loader不能产生新的文件 -
这些
loader不能使用定制的loaderAPI（也就是通过插件） -
这些
loader无法获取 Webpack 的选项设置
-
-
配置方式：
- 获取 CPU 的核数
const os = require("os"); const threads = os.cpus().length; // cpu核数 - 构建时，开启多线程
thread-loader{ test: /\.js$/, // exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理 include: path.resolve(__dirname, "../src"), // 只处理src下的文件，其他文件不处理 use: [ { loader: "thread-loader", // 开启多进程 options: { works: threads, // 进程数量 }, }, { test: /.s?css$/, exclude: /node_modules/, // 创建一个 css worker 池 use: [ 'style-loader', 'thread-loader', // 开启多进程 { loader: 'css-loader', options: { modules: true, localIdentName: '[name]__[local]--[hash:base64:5]', importLoaders: 1, }, }, 'postcss-loader', ], } ] } - Eslint 开启多线程, 属性
cache// 插件 plugins: [ new ESLintPlugin({ context: path.resolve(__dirname, "../src"), // 检测哪些文件 exclude: "node_modules", // 排除node_modules下的文件 cache: true, // 开启缓存 cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"), threads, // 开启多进程和设置进程数量 }), ] - 压缩时 开启多线程, 属性
paralleloptimization:{ minimizer:{ new TerserWebpackPlugin({ parallel: threads, // 开启多线程和设置进程数量 }) } }
【优化点】code Split （ 代码分割 ）
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后便能按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle、控制资源加载优先级，同时未改变的文件会被缓存，如果使用合理，会极大减小加载时间。
- 入口起点
使用 entry 配置手动地分离代码
module.exports = {
// 多入口配置
entry: {
app: "./src/app.js",
main: "./src/main.js"
},
output: {
filename: "[name].[hash: 10].js" // 配置hash
}
}
- 防止重复
使用 入口依赖 或者 SplitChunksPlugin 去重和分离 chunk
- 动态导入
通过模块的内联函数调用分离代码
