《Webpack 实战》——第一章：Webpack简介

Webpack ——开源JS打包工具，主要实现模块打包。

引言：

在Web开发中打交道的无非 是HTML、CSS、JS等静态资源，为什么不直接将工程中的源文件发布到服务器或者CDN上，而要交给Webpack处理呢？两者之间有什么不同？本文将从 为什么需要Webpack 以及简单的应用安装初步打包 进行介绍。

一、为什么需要Webpack？

1.1 模块

首先，我们要熟悉一个名词【模块】（在工程中引入一个日期处理的npm包，或者编写一个提供工具方法的JS文件，都可称为模块）。

【模块】

将所有代码按照特定的功能将其拆分成多个代码段，每个代码段实现特定的一个目的。

【模块化思想】

将每个代码段进行独立的设计、开发和测试，最终通过接口来将它们组合在一起。

1.2 历史延伸

早期的JS中并没有模块的概念，这是由于早期JS的设计者（JavaScript之父Brendan Eich）仅仅将其定位为一个小型的脚本语言，用于实现网页的简单动态特性，并未考虑到会实现今天这样复杂的场景。早期无模块化时，使用引入多个script文件到页面中实现。

【无模块化的缺点】

1. 需要手动维护JS的加载顺序。页面中的多个script之间通常会存在依赖关系，但是这种关系是隐式的，除了添加注释以外很难清晰地指明谁依赖谁，这样当页面加载多个文件时容易出现问题。