这是我参与「第五届青训营 」笔记创作活动的第12天
本节课将重点围绕「构建 Webpack 知识体系」这一核心话题展开。在正式学习 Webpack 之前，本节课将解读为什么需要学习 Webpack ，Webpack 的本质是什么以及 Webpack 技术优势等相关知识。
第一部分
- Webpack 的本质
- Webpack 定义解析
- Webpack 优势
在介绍完 Webpack 是什么之后，本节课将主要带来 Webpack 的使用方法，帮助同学从理论到实践，能够通过代码展示与案例讲解，了解关于 Webpack 的具体使用方法
第二部分
- 流程类配置
- 处理 CSS
- 接入 Bable
- 生成 HTML
- 使用 Webpack - 工具线
一个前端项目是由 CSS 样式文件、图片文件、JS 文件、Vue 文件、TS 文件、JSX 文件等部分组成。我们可以手动管理这些资源：
- 如果资源文件过多，手工操作流程繁琐。
- 当文件之间有依赖关系时，必须严格按依赖顺序书写。
- 开发与生产环境需要一致，难以接入 JS 和 TS 的新特性。
- 比较难接入 Less、Sass 等。
- JS、图片、CSS 资源管理模型不一致。
2009年诞生的 Node.js 和2010年诞生的 npm 将前端项目带入了工程化，而 Node.js 的 CommonJS 模块化规范不兼容浏览器。所以相继出现了一些打包工具，比如 Browserify、Gulp、RequireJS、Rollup、Webpack 等。
Webpack 本质上是一种前端资源译、打包工具。
- 多份资源文件打包成一个 Bundle，减少 http 请求数
- 支持 Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理 CSS、图片等资源文件
- 统一图片、CSS、字体等其它资源的处理模型
- 支持 HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离支持 Tree-shaking
- 支持 SourceMap
使用
关于Webpack的使用方法也比较简单，主要在于配置，分两部分：流程类以及工具类。
流程类：输入、模块解析、模块转译、后处理、输出。
工具类：开发效率类、性能优化类、日志类。
