这是我参与「第五届青训营 」伴学笔记创作活动的第13天
课程简介
由浅入深，从应用技巧到组件开发，再到 Webpack 构建流程的基本原理剖析，最后总结一套学习方法论，帮助读者 0 基础搭建 Webpack 知识体系。
课前准备
安装浏览器
- 请下载安装最新版本 NodeJS 环境；
- 请下载安装一个「现代」浏览器，比如 Chrome、Firefox、Edge 等。推荐使用最新版的 Chrome 浏览器。
安装编辑器
要进行前端开发，一个趁手的编辑器必不可少。强烈推荐使用 Visual Studio Code，如果你习惯使用其它编辑器也是可以的。
提前阅读
课前建议先充分了解 Webpack 的基本功能与作用，参考资料：Webpack 官网，建议根据官网文档手动搭建若干示例。
在前端工程化中webpack有比较重要的作用。 Webpack本质上是一个用于现代化JavaScript应用程序的静态模块打包工具。处理程序时，在webpack内部一个或多个入口点构建依赖图，将项目中所需要的模块组合成一个或多个bundles，用于展示内容。
为什么要学习 Webpack
- 理解前端“工程化”概念、工具、目标
- 提高个人核心竞争力
- 成为高阶前端工程师的必经之路
使用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标签
