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

1 为什么要学习Webpack？

• 理解前端工程化概念、工具、目标
• 提高个人核心竞争力
• 高阶前端必经之路

学习Webpack的目标

• 理解Webpack的基本用法
• 通过介绍Webpack功能、Loader与Plugin组件设计，建立一个知识体系

2 什么是Webpack

• 前端项目由什么构成？
  • 资源
  • 可以手动管理这些资源，但
    • 依赖手工，比如有50个JS文件操作，过程繁琐
    • 当代码文件之间有依赖的时候，就得严格按照依赖顺序书写
    • 开发与生产环境一致，难以接入TS或JS新特性
    • 比较难接入Less、Sass等工具
    • JS、图片、CSS资源管理模型不一致
  • 为了解决这些问题出现了很多工程化工具

Webpack

• Webpack本质上是一种前端资源编译、打包工具。
• 具体：
  • 将图片、ts等非标准的js文件编译成js兼容的文件
  • 多份资源文件打包成一个Bundle
  • 支持Babel、Eslint、TS、CoffeScript、Less、Sass
  • 支持模块化处理css、图片等资源文件
  • 支持HMR+开发服务器
  • 支持持续监听、持续构建
  • 支持代码分离
  • 支持Tree-shaking
  • 支持Sourcemap
  • ...
• 使用Webpack的基本步骤

3 Webpack打包核心流程

模块化+一致性

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

4 Webpack的使用

基本围绕“配置”展开，而这些配置大致可划分为两类

• 流程类：作用于流程中某个或若干个环节，直接影响打包效果的配置项
• 工具类：主流程之外，提供更多工程化能力的配置项
• 使用Webpack处理css文件