这是我参加青训营的第十三天
分享要点：
- 为什么需要使用 Webpack
理解前端“工程化”概念、工具、目标
提高个人核心竞争力
成为高阶前端工程师的必经之路
- Webpack 打包核心流程：Entry => Dependencies Lookup => Transform => Bundle => Output
入口处理：从'entry' 文件开始，启动编译流程；
依赖解析：从'entry'文件开始，根据'require' or import' 等语句找到依赖资源；
资源解析：根据module' 配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容；
资源合并打包：将转译后的资源内容0合并，打包为可直接在浏览器运行的JS文件；
模块化——一致性
多个文件资源合并成一个，减少http 请求数
支持模块化开发
支持高级JS特性
支持Typescript、CoffeeScript方言
统一图片、CSS、字体等其它资源的处理模型
Etc
使用Webpack接入Babel
安装依赖
声明入口 entry& 产物出口output
添加module处理css文件
使用Webpack生成html
安装依赖
配置
执行npx webpack
使用Webpack——HMR
Hot Module Replacement——模块热替换（写的代码会被立刻更新到浏览器上~）
开启HMR
启动webpack
使用Webpack——Tree-Shaking
Tree-Shaking -树摇，用于删除Dead Code
Dead Code
代码没有被用到，不可到达
代码的执行结果不会被用到
代码只读不写
Tree-Shaking
模块导出了，但未被其他模块使用
- Loader 组件应用与开发原理
Loader核心功能：将非JS资源转换为JS资源
安装Loader
添加module处理less文件
认识Loader：链式调用 less-loader: 实现less => css的转换 css-loader: 实现css => js的转换，将CSS包装成类似module.exports = “${css}” 的内容，包装后的内容符
JavaScript 语法 style-loader：将css模块包进require语句，并在运行时调用 injectStyle等函数将内容注入到页面的style标签
- Plugin 组件应用与开发原理
插件架构精髓：对扩展开放，对修改封闭，其实就是开闭原则
