这是我参与「第四届青训营」笔记创作活动的的第11天

为什么要学习Webpack

理解前端‘工程化’概念、目标、工具
一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
高阶前端必经之路

什么是Webpack

前端项目是有资源构建起来的，虽然我们可以手动管理这些资源，但是当我们钓的资源很多的时候，会导致页面复杂繁琐，对开发效率有很大的影响。Webpack等工程化工具出现才解决了上述问题，从而有了前端工程化这个概念。

Webpack本质上是一种前端资源编译、打包工具。多分资源打包成一个bundle。

Webpack用法

安装：npm i -D webpack webpack-cli
编辑配置文件：在webpack.config.js中配置
执行编译命令：npx webpack

关于Webpack的用法，基本围绕‘配置’展开，而这些配置大致可划分为两类：

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

Webpack打包核心流程

Webpack打包的最简化核心流程分为以下四步：

graph TD
1.入口处理 --> 2.依赖解析 --> 3.资源解析 --> 4.资源合并打包

入口处理：从‘entry’文件开始，启动编译流程
依赖解析：从‘entry’文件开始，根据‘require’ or ‘import’ 等语句找到依赖资源
递归调用2、3，直到所有资源处理完毕
资源解析：根据 ‘module’配置，调用资源转移器，将png、css等非标准js资源转译为js内容
资源合并打包：将转译后的资源内容合并打包为可直接在游览器运行的js文件

配置总览

webpack有五个模块：
入口(entry) -----设置入口文件路径
输出(output) -----设置打包后的文件存放路径以及文件名
loader加载器(module) -----一般用于css文件的打包
插件(plugin) -----可以设置一个html模板插件
模式(mode) -----设置打包模式（一般在开发阶段使用webpack,一般不在产品阶段打包）

按使用频率：

entry/output
module/plugins
mode
watch/devServer/devtool

Loader组件

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

认识Loader ——链式调用

例如：

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

特点

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

Plugin组件

webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等

plugin的使用步骤

步骤一：通过npm安装需要使用的plugin（某些webpack已经内置的插件不需要安装）
步骤二：在webpack.config.js中plugins中配置插件

如何学习Webpack

官网：Loaders | webpack 中文文档 (docschina.org)
知识体系导航图：Webpack 5 知识体系 - GitMind

构建Webpack知识体系|青训营笔记