这是我参与「第四届青训营 」笔记创作活动的第10天
什么是webpack
- 早期代码文件依赖过大，手动处理这些关系比较麻烦
- webpack:是一种前端资源编译（非JS文件,如css和图片等，变成JS文件），再将编译好的文件打包成bundle
流程
- 入口处理：
entry:'' - 依赖处理：从entry文件开始，根据
import/require等语句找到依赖资源 - 资源解析：根据
module配置，调用资源转移器，将png/css等非标准JS资源转译为JS内容 - 资源合并打包：转移后的资源打包成浏览器可运行JS文件
总结：模块化（支持对不同的资源的处理）、一致性
使用webpack
- 流程类：配置流程的某个环节
处理css
- 配置loder(test是过滤条件，use表示用什么样的loader去处理……文件)
- import '…….css'
处理Babel
- ES6与ES5的跨度较大，在一些浏览器中无法兼容，因此babel将ES6转译成ES5
生成HTML
- 工具类：提供更多工程化能力的配置
模块热替换（HRM：hot module replacement）
(devServer和watch的配置)
Tree-Shaking
- 定义了却没有使用的模块，在项目运行时删除
- 要设置mode和useExports
理解Loader
- 为了处理非标准JS资源，设计出资源翻译模块——loader用于将该资源翻译为标准JS
less文件的处理
- 添加依赖
- 配置module
