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

WebPack的使用

核心流程

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

   递归调用2、3直到所有资源处理完毕

模块化+一致性

1. 合并多个资源，减少http请求
2. 支持模块化开发
3. 支持高级JS特性
4. 支持TS等
5. 统一图片、CSS、字体等其他资源的处理模型
   ......

使用

对于Weboack的使用方法大致分为两类

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

1. 声明入口entry

   //webpack.config.js
   module.exports={
     entry:"./src/index"
   };
   

2. 声明产物出口output

   //webpack.config.js
   const path=require("path");
   
   module.exports={
     entry:"./src/index",
     output:{
       filename:"[name].js",
       path:path.join(__dirname,"./dist")
     }
   };
   

3. 运行[npx webpack]

流程类配置

工具线

Hot Mudule Reolacement ——— 模块热替换

将代码实时更新在浏览器上进行渲染，不需要对浏览器进行刷新

如何开启HMR

1. 配置

   //webpack.config.js
   module.exports={
     //...
     devServer:{
       hot:true
     }
   };
   

2. 启动Webpack[npx webpack serve]

Loader

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

认识Loader

链式调用

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

特性

特点

1. 链式执行
2. 支持异步执行
3. 分normal、pitch两种模式

常见Loader

理解插件

围绕钩子展开

钩子的核心信息：

1. 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情。
2. 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息。
3. 交互：在上下文参数对象中福袋里很了多存在side effect的交互接口，插件可以通过这些接口改变。

知识点