什么是Webpack

本质上是一种前端资源编译打包工具

• 多份资源文件打包成一个Bundle
• 支持Babel、Eslint、TS、CoffeScript、Less、Sass
• 支持模块化处理css、图片等资源文件
• 支持HMR+开发服务器
• 支持持续监听、持续构建
• 支持代码分离
• 支持Tree-shaking
• 支持Sourcemap
• ……

使用Webpack

核心流程

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

模块化 + 一致性

• 多个文件资源合并成一个，减少http请求数
• 支持模块化开发
• 支持高级JS特性
• 支持Typescript、CoffeeScript方言
• 统一图片、CSS、字体等其它资源的处理模型
• Etc ...

Webpack使用

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：

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

配置总览

常用：

• entry、output
• module、plugins
• mode
• watch、devServer、devtool

流程类配置

test、use：对test过滤出来的文件使用use定义其如何编译

处理CSS

接入Babel

生成HTML

使用了plugins

工具类配置

HMR

HMR —— 模块热替换

devServer: {
	hot: true,
}

tree shaking

树摇，删除没用上的代码

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

其他工具

• 缓存
• Sourcemap
• 性能监控
• 日志
• 代码压缩
• 分包
• ……

总结

本节课介绍了Webpack的一些基本知识，Webpack作用，重点介绍了关于Webpack的一些配置问题