[这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天]
1. 什么是webpack
- 本质上是一种前端资源编译（将非标准的 js 文件编译成标准的 js 内容，比如 ts 等）、 打包工具
- 特点
- 多份资源文件打包成一个 Bundle， 减少 Http 请求数
- 支持 Babel 、 Eslint 、 TS 、 CoffeeScript 、 Less 、 Sass
- 支持模块化处理 css、图片等资源文件
- 支持XMR + 开发服务器
- 支持持续监听、 持续构建
- 支持代码分离
2. 使用 webpack
- 安装依赖
npm i -D webpack webpack-cli- 在 webpack.config.js 中配置文件
- webpack 配置属性
- entry: 配置 webpack 的入口文件
- output: 配置 webpack 打包的出口目录
- webpack核心流程---极度简化版
- 入口处理： 从
entry文件开始，启动编译流程- 依赖解析： 从
entry文件开始，根据requireorimport等语句找到资源依赖- 资源解析： 根据
module配置，调用资源转移器，将 png、css 等非标准 js 资源编译为 js 内容- 资源合并打包： 将转译后的资源内容合并打包为可直接在浏览器中运行的 js 文件
- 在上述过程中，webpack 为递归调用第 2， 3 两步，直到所有的资源全部处理完毕
3. webpack 的配置项
- 流程类
- 作用于流程中某个或多个环节，直接影响打包效果的配置项
- 输入
- entry
- context
- 模块解析
- resolve
- externals
- 模块转译
- module
- 处理 loader
- 后处理
- optimization
- mode
- 如果设置为 production 那么产物会压缩
- target
- 工具类
- 主流程之外，提供更多工程化能力的配置项
- 重点
entry / outputmodule / pluginsmodewatch / devServe / devtool
- module : 配置 loader
- rules ： 配置 loader 规则
- test ： 需要处理的文件
- use : 使用什么 loader 来处理文件
4. 使用 webpack
- 接入 Babel
- webpack 处理 js 的工具。Babel 本质上一种代码转移的工具
- 将高版本的 js 代码转换为低版本的代码，以此来提高兼容性
- 使用方法
- 安装依赖
- 配置
- 思考题
- Babel 具体有什么功能
- Babel 与 webpack 分别解决了什么问题？为什么两者能协作到一起
- 生成 HTML
- 使用方法
- 安装依赖
- 相关配置
- 该插件能够自动帮助我们生成 html 文件
- 思考题
- 相比手工维护 HTML 内容，这种自动生成的方式有什么优缺点
- 工具线
- XMR---模块热替换
- 更新的代码能够立刻在浏览器不刷新的前提下能够更新代码
- 使用方法
- 配置
- 设置 watch: true 来让 webpack 持续的构建
- 启动
- Tree-Shaking---树摇
- 用于删除 Dead Code
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
- 而 Tree-Shaking 就是要将定义但是没有实际使用的变量删除
- 使用方法
- 配置
- 对工具类库如 Lodash 有奇效
- 其他工具
- 缓存
- Sourcemap
- 将压缩的产物映射回最初始化的状态
- 性能监控
- 日志
- 代码压缩
- 分包
- 思考题
- 除上面提到的内容，还有哪些配置可以分为
流程类配置- 工具类配置具体有什么作用？ 包括
devtool/cache/stat等，其背后用到的技术什么
