这是我参与「第四届青训营 」笔记创作活动的第10天。
构建Webpack知识体系：
一：什么是Webpack：
1. 前端是由多个资源构成的。
2. Webpack本质上是一种前端资源编译、打包工具：多份资源文件打包成一个Bundle ，支持Babel、Eslint、 TS、CoffeScript. Less、Sass。支持模块化处理css、图片等资源文件、支持HMR+开发服务器、支持持续监听、持续构建、支持代码分离、支持Tree-shaking、支持Sourcemap。
二：使用Webpack
1. 安装：
2. 编辑配置文件
3. 执行编译命令
4. 核心流程：
a) 入口处理：从’entry'文件开始，启动编译流程
b) 依赖解析：从‘entry’ 文件开始，根据”require' or "import'等语句找到依赖资源
c) 资源解析：根据’module'配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
d) 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
5. 模块化+一致性：
a) 多个文件资源合并成一个，减少http 请求数
b) 支持模块化开发
c) 支持高级JS特性
d) 支持Typescript、CoffeeScript方言
e) 统一图片、CSS、字体等其它资源的处理模型
6. 配置：
a) 口流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
b) D工具类:主流程之外，提供更多工程化能力的配置项
7. 流程类配置：
a) 输入：‘entry’ ‘context’
b) 模块解析：‘resolve’、‘externals’
c) 模块转译：‘module’
d) 后处理：‘optimization’‘mode’‘target’
8. 声明入口‘entry’
module. exports = {
entr y: ”./src/ index"
};
9. 声明产物出口‘output’
const path = require("path");
module. exports = {
entry:” ./src/ index"，
output: {
filename: " [name].js" ,
path: path. join(__ dirname ，“./dist")，
}
};
10. 处理CSS:
a) 安装loader：
npm add -D css-loader style-loader
b) 添加‘module’处理css文件：
const path = require( "path" );
module. exports = {
entry : ”./src/ index",
output: {
filename: " [name].js",
path: path. join(__ dirname, “./dist"),
}，
module: {
// Css 处理器
rules: [{
test:/\.css/i,
use:[
"style-loader" ，
“css-loader "
],
}]，
},
};
11. 接入Bable：
a) 安装依赖：
npm i -D @babel/core @babel/preset-env babel-loader
b) 声明产物出口‘output:
c) 执行‘npx webpack’
12. 生成HTML
a) 安装依赖：
b) 声明产物出口‘output’：
c) 执行：‘npx Webpack’：
13. 工具线：
a) HMR：Hot Module Replacement一模块热替换
b) Tree-Shaking：
模块导出了，但未被其它模块使用
开启tree- shaking:
‘imode: ”production”'
“optimization.’usedExports: true'”
三：进阶篇：理解Loader：
1. 为了处理非标准JS资源，设计出资源翻译模块—Loader。用于将资源翻译为标准JS。
2. 链式调用：
a) less-loader: 实现less=> css的转换
b) css-loader:将CSS包装成类似module.exports= "${css}" 的内容，包装后的内容符合JavaScript 语法
c) style-loader:将css模块包进require语句，并在运行时调用injectStyle 等函数将内容注入到页面的style标签
3. 特点：链式执行、支持异步执行、分normal、pitch 两种模式
四：进阶篇：理解插件：
1. 钩子的核心信息：
a) 时机:编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情;
b) 上下文:通过tapable提供的回调机制，以参数方式传递上下文信息;
c) 交互:在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
