这是我参与「第四届青训营」笔记创作活动的第17天。

为什么要学习Webpack？

• 理解前端“工程化”概念、工具、目标
• 一个团队总要有那么几个人熟悉 Webpack, 某种程度上可以成为个人的核心竞争力
• 高阶前端必经之路

主要内容介绍：

• 什么是 Webpack
• Webpack打包核心流程
  • 示例
  • Entry => Dependencies Lookup => Transform => Bundle => Output
  • 关键配置项介绍
• Loader组件
• Plugin组件
• 如何学习Webpack
  • 入门级：学会灵活应用
  • 进阶：学会扩展Webpack
  • 大师：源码级理解Webpack打包编译原理

前端项目由 资源 构成。

什么是Webpack？

• 多份资源文件打包成一个 Bundlle
• 支持 Babel、 Eslint、 TS、 CoffeScript、 Less、 Sass
• 支持模块化处理 css、图片等资源文件支持 HMR +开发服务器
• 支持持续监听、持续构建
• 支持代码分离
• 支持 Tree-shaking
• 支持 Sourcemap

使用Webpack

核心流程（极度简化版）

1. 入口处理

   从entry文件开始，启动编译流程

2. 依赖解析

   从entry文件开始，根据 require 或 import 等语句找到依赖资源

3. 资源解析

   根据 module 配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容。

4. 资源合并打包

   将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

过程中递归调用2.3，直到所有资源处理完毕。

Webpack做的两件事情（模块化+一致性）

• 多个文件资源合并成一个，减少http请求数
• 支持模块化开发
• 支持高级JS特性
• 支持Typescript、CoffeeScript方言
• 统一图片、CSS、字体等其他资源的处理模型

Webpack使用

• 流程类：作用域流程中某个or若干个环节，直接影响打包效果的配置项。
• 工具类： 主流程之外，提供更多工程化能力的配置项

问题：

• Loader有什么作用？为什么这里需要用到css-loader、style-loafer
• 与旧时代—在HTML 文件中维护 css 相比，这种方式会有什么优劣处？
• 有没有接触过 Less、Sass、 Stylus 这一类 CSS 预编译框架？如何在 Webpack 接入这些工具？
• Baael具体有什么功能？
• Babel与Webpack分别解决了什么问题？为何两者可以协作到一起？
• 除了上面提到的内容，还有哪些配置可以划分为“流程类”配置？
• 工具类配置具体有什么作用？包括·devtool/cache/stat·等。