这是我参与「第四届青训营」笔记创作活动的的第14天
什么是 Webpack
前端项目由许多资源构成，如 png、jpg、gif、webp、js、ts、css、less、vue、jsx、sass 等，在以前，这些资源通常是手工管理。但手工管理有如下缺点：
- 依赖手工，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
这些都是旧时代非常突出的问题，对开发效率影响非常大，直到工程化工具的出现才就解决了这一问题，webpack 就是其中的佼佼者。
Webpack本质上是一种前端资源编译、打包工具：
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeeScript、Less、Sass
- 支持模块化处理CSS、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ...
使用 Webpack
示例
- 安装
npm i -D webpack webpack-cli
- 编辑配置文件
- 执行编译命令
npx webpack
效果：
核心流程
- 入口处理
从 entry 文件开始，启动编译流程
- 依赖解析
从 entry 文件开始，根据 require or import 等语句找到依赖资源
- 资源解析
根据 module 配置，调用资源转移器，将 png、css 等非标准 JS 资源转译为 JS 内容
（递归调用2、3，直到所有资源处理完毕）
- 资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的 JS 文件
使用 Webpack
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可以分为两类：
- 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
流程类配置
- 输入：
entry、context - 模块解析：
resolve、externals - 模块转译：
module - 后处理：
optimization、mode、target
处理 css
- 安装
npm install css-loader style-loader -D
- 添加 module 处理 css 文件
接入 Bable
- 安装
npm install @babel/core @babel/preset-env babel-loader -D
- 添加 module
生成 HTML
- 安装
npm install html-webpack-plugin -D
- 添加 module
