这是我参与「第五届青训营 」伴学笔记创作活动的第13天
课程简介
由浅入深，从应用技巧到组件开发，再到 Webpack 构建流程的基本原理剖析，最后总结一套学习方法论，帮助读者 0 基础搭建 Webpack 知识体系。
课前准备
安装浏览器
- 请下载安装最新版本 NodeJS 环境；
- 请下载安装一个「现代」浏览器，比如 Chrome、Firefox、Edge 等。推荐使用最新版的 Chrome 浏览器。
安装编辑器
要进行前端开发，一个趁手的编辑器必不可少。强烈推荐使用 Visual Studio Code，如果你习惯使用其它编辑器也是可以的。
提前阅读
课前建议先充分了解 Webpack 的基本功能与作用，参考资料：Webpack 官网，建议根据官网文档手动搭建若干示例。
在前端工程化中webpack有比较重要的作用。 Webpack本质上是一个用于现代化JavaScript应用程序的静态模块打包工具。处理程序时，在webpack内部一个或多个入口点构建依赖图，将项目中所需要的模块组合成一个或多个bundles，用于展示内容。
Webpack基础知识
- 安装webpack——npm i -D webpack webpack-cli
- 编写配置文件——(核心)编写webpack.config.js文件
- 执行编译命令——npx webpack
理解Loader
Webpack只认识JS，为了处理非标准的js资源，设计出资源翻译模块——Loader用于将资源翻译为非标准的JS（如：CSS、Less）
安装Loader——npm add -D css-loader style-loader less-loader
less-loader:less=>css转换 css-loader:处理css代码 style-loader：将css模块包进require语句，在运行时将内容注入到style标签 运行的过程基于Loader的链式调用，大致为：less转换为css，css通过css-loader包装成module.exports="${css}"内容，再注入style标签
课后阅读材料
- 深度剖析 Webpack 系列
- 深入浅出 Webpack
- Webpack Book
- Configuration | webpack
- Awesome-webpack-4plus
