这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
今天主要学习了Webpack的定义以及使用方法，重点在于Webpack的本质、定义解析、流程类配置、处理 CSS、接入 Bable、生成 HTML以及使用 Webpack - 工具线Webpack的优势。
一、什么是Webpack
一个前端项目由很多资源构成。我们需要把它打包起来，而Webpack则可以实现打包的功能，它是一个模块化打包工具，将不同的资源和文件，进行打包，合并在一个文件里。
在旧时代，人们经常手动管理这些资源。
但，依赖手工，比如有50个JS文件...操作，过程繁琐；当代码文件之间有依赖的时候，就得严格按依赖顺序书写；开发与生产环境一致， 难以接入TS或JS新特性；比较难接入Less、Sass等工具；JS、图片、CSS资源管理模型不一致这些都是旧时代非常突出的问题，对开发效率影响
非常大。
为了解决这个问题，出现了很多工具。
而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文件
模块化+一致性
- 多个文件资源合并成一个，减少http 请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript 方言
- 统一图片、CSS、 字体等其它资源的处理模型
- Etc..
如何使用Webpack
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
使用Webpack-流程类配置
使用Webpack-配置总览
按使用频率:
- entry/output
- imodule/ plugins
- mode
- watch/devServer/devtool
使用Webpack-处理CSS
使用Webpack-接入Babel
使用Webpack-生成 HTML
使用Webpack-工具线
使用Webpack-HMR
使用Webpack-Tree- Shaking
Dead Code
- 代码没有被用到， 不可到达
- 代码的执行结 果不会被用到
- 代码只读不写
- ...
Tree -Shaking
- 模块导出了，但未被其它模块使用
其他工具
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
三、总结
今天通过对Webpack的定义以及使用方法的学习，我理解了Webpack这个新的工具，知道了它的优势：它可以把很多文件打包整合到一起, 缩小项目体积, 提高加载速度。并且通过这个知道了它在Web中的使用，学会了应用它在实际的项目中，又掌握了一个前端开发的工具-Webpack。
