webpack
- 是什么：本质是一个模块打包器，其工作是将每个模块打包成相应的
bundle
- 核心概念：
mode、entry、output、loader、plugin
- 构建流程：初始化、编译、输出，插件（
Plugin）随时监听 Webpack 广播并在某些时候调用 API 改变运行结果。
- entry：指定打包⼊口⽂文件。原本是
string，即一个入口对一个打包文件、object 多对一，array 多对多
- output：打包后的文件位置
- loader：翻译官，对不同资源进行处理，从右向左执行
- plugin：插件，扩展
Webpack 的功能，监听 Webpack 的生命周期，调用 API 改变输出结果。
- resolve：配置
Webpack 如何寻找模块所对应的文件。resolve.modules/extensions/include/exclude
- 从 0 开始配置 Webpack
- 技术选型：移动端|PC、MPA|SPA、HTML|模板引擎、CSS|预处理器、ES5|ES6+、Mock、React|Vue、多人合作|单人项目、ESlint|TSlint、单元测试、提交规范
-
- Loader 处理 CSS、Less、Sass
- Loader 处理图片
- Loader 处理字体
- Loader 配置多页面打包（MPA）
- source map
- webpack dev server
- babel
- react
- 性能优化
- 其他：解析器、写 Loader、写 Plugin
- 懒加载
-
- 代码分割：
code splitting
- 实现原理：子模块单独打包、借助函数延迟加载
- Vue 按需加载
- 热更新
- 开启方式：配置
devServer，添加热更新插件 HotModuleReplacementPlugin
- 热更新原理
-
- 3 种 hash：
hash：整个项目只要有文件更改，那就变更chunkhash：某个入口对应的 chunk 进行了变更，那就生成新的 hash 值，不会影响其他 chunkcontenthash：对应某个文件内容变更了，才会更换这个文件，生成新的 hash，而不会影响同一个模块下其他文件- source map：将编译、打包、压缩后的代码映射回源代码的过程
