构建 Webpack 知识体系
为什么要学Webpack？
某种程度上可以成为个人的核心竞争力
高阶前端必经之路
前端项目由什么构成？
PNG、JPG、GIF、WEBP、JS、TS、CSS、Less、Vue、JSX、Sass...
什么是Webpack?
本质上是一种前端资源编译、打包工具
多份资源文件打包成一个Bundle
支持Babel、Eslint、TS、CoffeScript、Less、Sass
支持模块化处理css、图片等资源文件
支持HMR+开发服务器
支持持续监听、持续构建
支持代码分离
支持 Tree-shaking
支持Sourcemap
......
Webpack工作过程中大致可以分为四个步骤：
1、入口处理--从 ‘entry’ 文件开始，启动编译流程
2、依赖解析--从 ‘entry’ 文件开始，根据 ‘require’ or ‘import’ 等语句找到依赖资源
3、资源解析--根据 ‘module’ 配置，调用资源转移器，将png、css 等非标准 JS 资源转译为 JS 内容
4、资源合并打包--将转译后的资源内容合并打包为可直接在浏览器运行的 JS 文件
关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
-流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
-工具类：主流程之外，提供更多工程化能力的配置项
配置总览
Loader 的核心功能就是把 JS 的核心资源，设计出资源翻译模块，用于将资源翻译为标准的 JS
使用 Loader：装各种依赖，装各种包，添加 module 的配置
三个Loader才能正常处理内容：
-less-loader：实现 less => css 的转换
-css-leader：将css包装成类似 module.exports = "${css}" 的内容，包装后的内容符合 JavaScript 语法
-style-loader：将 css 模块包进 require 语句，并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签
loader 的特点：
-链式执行
-支持异步执行
-分 normal、pitch 两种模式
常见Loader
Webpack 本身的很多功能是基于插件实现的
首先：插件围绕“钩子”展开
钩子 的核心信息：
1、时机：编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情；
2、上下文：通过tapable 提供的回调机制，以参数方式传递上下文信息；
3、交互：在上下文参数对象中附带了很多存在 side effect 的交互接口，插件可以通过这些接口改变。
标题：Webpack 定义解析 - 掘金
