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

课程重点

• Webpack 的本质
• Webpack 定义解析
• Webpack 优势

什么是Webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容 本质上是一个前端资源编译、打包工具

为什么要学习Webpack？

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

如何使用Webpack

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

webpack核心流程：

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

使用webpack

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

使用Webpack接入Babel

• 安装依赖
• 声明入口 entry& 产物出口output
• 添加module处理css文件

使用Webpack生成html

• 安装依赖
• 配置
• 执行npx webpack

使用Webpack——HMR

Hot Module Replacement——模块热替换（写的代码会被立刻更新到浏览器上~）

• 开启HMR
• 启动webpack

使用Webpack——Tree-Shaking

• Tree-Shaking -树摇，用于删除Dead Code

• Dead Code

  • 代码没有被用到，不可到达
  • 代码的执行结果不会被用到
  • 代码只读不写

• Tree-Shaking 模块导出了，但未被其他模块使用

总结：

这次课使我对前端打包工具有了深入的了解，掌握了其基本原理和使用方法，获益匪浅