这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
什么是webpack
webpack本质上是一周前端资源编译、打包工具
- 多份资源文件打包成一个bundle
- 支持babel、eslint、stylelint、vue、typescript、less、sass
- 支持模块化处理css、图片等资源文件
- 支持持续监听、持续构建
- 支持代码分离
- 支持tree-shaking
- 支持sourceMap
webpack的构建流程
- 入口处理(从entry文件开始，启动编译流程)
- 依赖解析(从entry文件开始，根据require或import等语句找到依赖资源)
- 资源解析(根据module配置，调用loader，将png、css等非标准js资源转译为js内容)
- 资源合并打包(将转译后的资源内容合并打包为可直接在浏览器运行的js文件)
webpack的特点
模块化：一致性
- 将多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级js特性
- 支持typescript、coffeescript语言
- 统一图片、css、字体等其它资源的处理模型
webpack的工具类配置
- 开发效率类：watch、devtool、devServer
- 性能优化类：cache、performace
- 日志类：stats、infrastructureLogging
- 输入：entry、context
- 模块处理:module、resolve、externals
- 后处理：optimization、target、mode
- 输出：output
tree-shaking的作用
- 代码没有被用到，不可到达
- 代码的执行结果变化被用到
- 代码只读不屑
- 模块导出了，但未被其它模块使用 以上几种情况开启了tree-shaking，在打包的时候就不会打包它们
开启treeshaking的方法
- mode：production
- optimazation.usedExports:true
开启treeshaking后的缺点
由于tree-shaking会默认不打包未直接使用的模块。假设有这样一个场景，如果一个模块引入后是会自动影响全局(也就是用副作用)，但是未被使用，而treeshaking直接忽略掉它。这样就会有问题，我们要告诉webpack这个模块是有副作用的。在package.json中根对象配置
"sideEffects":["module"]
其它注意的点
loader是用来帮助webpack转换非js文件的
而plugin是拓展webpack功能的。
