Webpack 知识体系 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第11天，整理一下今天课上关于Web

这是我参与「第四届青训营」笔记创作活动的的第11天，整理一下今天课上关于 Webpack 的知识。

一、本堂课重点内容

什么是 Webpack
Webpack 打包核心流程
什么是 Loader 组件
什么是 Plugin 组件

二、详细知识点介绍

1. 什么是 Webpack

本质上是一种前端资源编译、打包工具，其包括：

多份资源文件打包成一个 Bundle
支持 Babel、Eslint、TypeScript、Sass 等
支持模块化处理 CSS、图片等资源文件
支持 HMR + 开发服务器
支持 Tree-shaking
...

2. 如何使用 Webpack

安装

pnpm install -D webpack webpack-cli

编辑配置文件（webpack.config.js）

const path = require("path")

module.exports = {
    entry: "./src/index", // 入口文件
    output: {
        filename: "bundle.js", // 输出文件的文件名
        path: path.join(__dirname, "./dist"), // 输出文件所在的目录
    }
}

执行编译命令

pnpm webpack

3. Webpack 打包的核心流程

核心原理参考：[万字总结] 一文吃透 Webpack 核心原理 (qq.com)

4. Webpack 的配置项

流程类：作用于流程中某个或若干个环节，直接影响打包效果
工具类：主流程之外，提供更多工程化能力的配置项

官方文档：webpack 中文文档 (docschina.org)

entry：项目入口
output：产物出口
处理 CSS：

module: {
    rules: [{
        test: /\.css$/, // 匹配需要处理的文件的文件名
        use: ["style-loader", "css-loader"], // 使用 Loader
    }]
}

接入 Babel：用于将采用 ES 2015+ 语法编写的代码转换为向后兼容的 JS 语法

pnpm add -D @babel/core @bebal/preset-env babel-loader

module: {
    rules: [{
        test: /\.js$/,
        use: [{
            loader: "babel-loader",
            options: {
                presets: [["@babel/preset-env"]],
            }
        }],
    }]
}

生成 HTML 文件

pnpm add -D html-webpack-plugin

plugins: [new HtmlWebpackPlugin()]

HMR：热更新

devServer: {
    hot: true,
}

Tree-shaking

mode: "production",
optimization: {
    usedExports: true,
}

5. 什么是 Loader

由于 Webpack 最终的产物仅有 JS，因此 Loader 用于处理非标准 JS 资源，将资源转译为标准 JS，如：

less-loader：将 less 转换为 css
css-loader：将 CSS 包装成类似module.exports = "CSS内容"的形式，包装后的内容符合 JS 语法
style-loader：将 CSS 模块包装进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签

特点：

链式执行
支持异步执行
分为 normal、pitch 两种模式

6. 什么是 Plugin

插件架构精髓：对扩展开放，对修改封闭
插件围绕“钩子”展开
- 时机：编译过程的特定节点，webpack 会以钩子形式通知插件此刻整在发生什么事情
- 上下文：通过 tapable 提供的回调机制，以参数形式传递上下文信息
- 交互：在上下文参数对象中附带了很多存在 side effect 的交互接口，插件可以通过这些接口改变其状态

7. Webpack 知识体系

Webpack 5 知识体系 - GitMind

三、课后个人总结

这节课上老师主要讲解了 Webpack 的作用和工作原理，以及在实际开发过程中我们需要掌握的主要配置项和 Loader、Plugin 的使用。虽然 Webpack 的相关配置是十分繁杂的，但是我们首先需要做到的就是大概理解 Webpack 能用来干什么，以及它大概是怎么实现打包这个流程的，只有理解了原理，才能游刃有余地掌握这个前端工程化工具。

Webpack 知识体系 | 青训营笔记