这是我参与[第五届青训营]笔记创作活动的第十三天

本课堂重点内容：

Webpack 本质
Webpack 定义解析
Webpack 优势
流程类配置
处理 CSS
接入 Bable
生成 HTML
使用 Webpack - 工具线
Webpack 内容识别 - 只认识 JS
使用 Loader
Loader 的链式调用与其他特性
常见 Loader
插件定义解析
插件设计优势
Loader 与插件的差异

详细知识点介绍：

何为 Webpack:

Webpack 本质上是一种前端资源编译、打包工具

Webpack 的使用：

安装

npm i -D webpack webpack-cli

配置 Webpack.config.js
执行

npx webpack

核心流程：

1. 入口处理：

从 entry 文件开始，启动编译流程

2. 依赖解析：

从 entry 文件开始，根据 require or import 等语句找到依赖资源

3. 资源解析：

根据 module 配置，调用资源转移器，将 png、css 等非标准JS资源转译为 JS 内容

4. 资源合并打包：

将转译后的资源内容合并打包为可以直接在浏览器运行的 JS 文件

Webpack 配置：

Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可以分为两类：

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

流程类配置：

输入： entry, context
模块解析：resolve, externals
模块转译：module
后处理：optimization, mode, target

配置总览：

处理 CSS：

安装 Loader：

npm add -D css-loader style-loader

添加 module处理 css 文件：

接入 Bable：

安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

声明产物出口 output
执行 npx webpack

生成 HTML：

安装依赖：

npm i -D html-webpack-plugin

2.声明产物出口 output 3. 执行 npx webpack

HMR:

Hot Module Replacement —— 模块热替换

开启 HMR
启动 webpack

npx webpack serve

Tree-Shaking:

树摇，用于删除 Dead Code 开启 tree-shaking：
mode: "production"
optimization.usedExports: true
对工具库，如 Lodash 有奇效

Webpack 内容识别 - 只认识 JS：

为处理非标准 JS 资源，设计出资源翻译模块 —— Loader，用于将资源翻译为标准 JS

Loader 使用：

安装

npm add -D css-loader style-loader less-loader

添加 module 处理 css 文件

Loader —— 链式调用

less-loader：实现 less => css 的转换
css-loader：将 CSS 包装成类似 module.exports = "${css}" 的内容，包装后的内容符合 JavaScript 语法
style-loader：将 css 模块包进 require 语句，并在运行时调用 injectstyle 等函数将内容注入到页面的 style 标签

常见 Loader：

个人课后总结：

Webpack的熟练程度，是迈向高阶前端的必经之路

Webpack 知识体系 | 青训营笔记