秋堂主
秋堂主

第1集丨webpack 江湖 —— 概述

目录

  • 一、背景
    • 1.1 前端模块加载
    • 1.2 所有资源都是模块
    • 1.3 静态分析
  • 二、什么是 Webpack
    • 2.1 入口(entry)
    • 2.2 输出(output)
    • 2.3 loader
    • 2.4 插件(plugin)
    • 2.5 模式(mode)
    • 2.6 浏览器兼容性(browser compatibility)
    • 2.7 环境(environment)
  • 三、模块系统的演进
    • 3.1 原始方案
    • 3.2 CommonJS
    • 3.3 AMD
    • 3.4 CMD
    • 3.5 UMD
    • 3.6 ES6 模块

Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

一、背景

模块系统主要解决模块的定义、依赖和导出。我们所期望的模块系统：可以兼容多种模块风格，尽量可以利用已有的代码，不仅仅只是 JavaScript 模块化，还有 CSS、图片、字体等资源也需要模块化。

1.1 前端模块加载

前端模块要在客户端中执行，所以他们需要增量加载到浏览器中。模块的加载和传输，我们首先能想到两种极端的方式:

  • 一种是每个模块文件都单独请求
  • 另一种是把所有模块打包成一个文件然后只请求一次。

显而易见，每个模块都发起单独的请求造成了请求次数过多，导致应用启动速度慢；一次请求加载所有模块导致流量浪费、初始化过程慢。这两种方式都不是好的解决方案，它们过于简单粗暴。

分块传输，按需进行懒加载，在实际用到某些模块的时候再增量更新，才是较为合理的模块加载方案。要实现模块的按需加载，就需要一个对整个代码库中的模块进行静态分析、编译打包的过程。

1.2 所有资源都是模块

模块不仅仅是指JavaScript模块文件。然而，在前端开发过程中还涉及到样式、图片、字体、HTML 模板等等众多的资源。这些资源还会以各种方言的形式存在，比如 coffeescript、 less、 sass、众多的模板库、多语言系统（i18n）等等。

如果他们都可以视作模块，并且都可以通过require的方式来加载，将带来优雅的开发体验，比如：

require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");

那么如何做到让 require 能加载各种资源呢？

1.3 静态分析

在编译的时候，要对整个代码进行静态分析，分析出各个模块的类型和它们依赖关系，然后将不同类型的模块提交给适配的加载器来处理。比如一个用 LESS 写的样式模块，可以先用 LESS 加载器将它转成一个CSS 模块，在通过 CSS 模块把他插入到页面的