什么是Webpack

Posted 2020-08-21

Webpack电子书

现在，越来越多的网站已经从网页模式进到到了 Webapp 模式，它们运行在高级浏览器中，使用 html5、CSS3、ES6等技术来开发丰富的功能。WebApp 通常是一个单页面应用，每一个视图通过异步的方式来加载，这样会导致在加载的时候应用越来越多的 javascript 语言。
现在就需要应对一个问题，如何在开发环境组织好这些碎片化的代码和资源，并且保证它们在浏览器端快速、优雅地加载和更新。这就需要一个模块化系统，这个问题一直都是前端工程师多年来一直探索的问题。

模块系统的演进

<script> 标签

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

这是最原始的 JavaScript 文件加载方式，这样原始的加载方式暴露了一些显而易见的弊端：

• 全局作用域下容易造成变量冲突；
• 文件只能按照 <script> 书写顺序进行加载；
• 开发人员必须主观解决模块和代码库的依赖关系；
• 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

CommonJS

require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;

优点：

• 服务器端模块便于重用
• NPM 中已经有将近 20 万个可以使用的模块包
• 简单并容易使用

缺点：

• 同步的模块加载方式不适合站在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的；
• 不能非阻塞地并行加载多个模块

AMD (Asynchronous Module Definition)

CMD (Common Module Definition)

UMD (Universal Module Definition)

ES6 模块

期望的模块系统

可以兼容多种模块风格，尽量可以利用已有的代码，不仅仅只是 JavaScript 模块化，还有 CSS、图片、字体等资源也需要模块化。

前端模块加载

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

所有资源都是模块

模块不仅仅可以是指 JavaScript 模块文件，在前端开发过程中还涉及到样式、图片、字体、HTML 模板等众多的资源。
如果它们都可以视作模块，并且都可以通过 require 的方式来加载，将带来优雅的开发体验, 比如：

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

如何让 require 能加载各种资源？Webpack 应运而生。

什么是 Webpack

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

来自为知笔记(Wiz)