1.5　webpack

在没有出现模块管理器之前的前端开发，如果要引用依赖资源，通常的做法是将依赖文件引用到.html文件中。比如，要引用js文件，在.html文件中用＜script＞标签引用；引用.css文件，在.html文件中用＜link＞标签引用。这样做的弊端是，如果引用的资源文件太多，请求太多，会拖慢网页加载速度，影响用户体验，另外也会使网页体积臃肿、不便维护。随着模块管理器的出现，上述问题得到解决。目前市面上流行的包管理器有很多，比如Bower、Browserify、webpack等，本书主要讲解webpack这个前端的包管理器，其他工具的用法和webpack大同小异，读者自行网上学习即可。

webpack主要有4个核心概念：

·入口（entry）：webpack所有依赖关系图的起点。

·出口（output）：指定webpack打包应用程序的地方。

·加载器（loader）：指定加载的需要处理的各类文件。

·插件（plugins）：定义项目要用到的插件。

1.5.1　为什么需要webpack

移动互联网时代的网站正在慢慢演化为Web APP，这种局势愈演愈烈，读者应该能感受到Web前端发展之迅速，浏览器在不断强大，JavaScript的新标准ES6也在2015年制定，各种流行的JS框架问世，发展着实快。另外，现在的Web前端更倾向单页面应用（SPA），要求的页面刷新越来越少，这样庞大的代码量如果管理不好就会导致很多的后续问题，比如各个模块耦合度变高、很难维护等。这样就催生了模块管理器。

webpack是前端的一个模块管理工具，其可依据各个模块之间的依赖关系进行静态分析，然后将这些模块按照相应规则生产静态资源供项目调用。可以通过图1-1来理解webpack是做什么的。

可以看出，webpack可以将具有各种依赖关系的静态模块转化成一个独立的静态模块，这样做的好处是大大减少了请求次数，提高了网页的性能，用户体验也随之提高。

webpack的另一个作用是可以把目前一些浏览器解释不了的语言进行编译，转换成浏览器可以识别的内容。React的所有代码示例都以ES6标准讲解，ES6的有些语法目前在一些主流的浏览器上还不支持，需要对webpack进行一些配置后，React才可正常运行。

1.5.2　webpack入口和出口

webpack的四大要素即entry、output、loader和plugins，在讲解这几个要素之前，先了解怎么安装webpack。

webpack的安装需要npm来完成，有两种安装方式，命令如下：

或者

安装好之后，就可以使用webpack的命令了。比如现在有一个main.js文件，要将其打包生成一个bundle.js文件，就可以用下面的命令：

一般在实际的项目开发中，要把这些命令写到一个名为webpack.config.js的文件中。

webpack需要处理具有依赖的各个模块，这些模块会构成一个关系图。webpack的入口就是这张关系图的起点，指的就是入口文件。webpack的出口指的是需要把这张关系图导出到哪个文件中，即导出文件。这里以一个具体的webpack.config.js文件讲解，配置如下：

上述webpack.config.js文件只配置了项目的entry和output。在该项目的关系图中，main.js是起点，main.js可能和别的模块存在依赖关系，但是开发者不需要关心这些，寻找依赖、解决依赖是webpack的工作。

entry字段指定入口文件，也可以理解为APP启动时运行的第一个文件。其语法如下：

entry字段可以为一个字符串，也可以是一个字符串数组，所以entry可以指定一个入口文件，也可以指定多个入口文件。

output主要是告诉webpack把整理后的所有资源都放在哪里，指定输出位置。上述示例中，output只指定了filename，其实还可以指定路径path，如果省略path参数，将默认输出到webpack.config.js同级目录下。

1.5.3　webpack loader

webpack要完成的任务是把具有依赖关系的各个文件进行整合，然后打包，当然文件类型会有很多种，比如.css、.html、.scss、.jpg等。但是webpack只认识JavaScript，那处理其他类型的文件是如何做到的呢？loader解决了这个问题。

loader在构建文件过程中起着重要的作用，首先loader可以识别出要对哪些文件进行预处理，然后loader转换这些文件添加到bundle（构建后的模块）中。例如，React开发一般使用JSX这种扩展语言来编写，JSX这种格式目前的浏览器是理解不了的，那webpack loader可以在JSX被项目使用之前做一些预处理，可以将其转换为JavaScript语言。示例如下：

上述示例中，test字段表示要对哪些文件进行构建，use字段表示要用哪些模块对类型文件进行构建。在配置loader之前，use中的模块是需要安装的。命令如下：

webpack最新版本已废弃了loaders、loader的写法，改成了rules、use。这个读者要注意，网上的一些教程是以老版本的标准写的，如果用老版本的写法，那么在运行webpack的时候会报错。

1.5.4　webpack plugins

插件的意义一般是用于丰富功能，webpack的plugins就是用来丰富webpack功能的。plugins在webpack中起着重要作用，开发者可以在webpack.config.js配置文件中添加想要的其他插件功能。

webpack plugins的用法很简单，先调用require，然后在plugins字段中用new来定义。

例如，现在需要安装一个第三方插件html-webpack-plugin，操作步骤如下。

（1）该插件为第三方插件，首先需要npm安装，命令为：

（2）然后配置webpack.config.js文件中的plugins：

plugins参数为一个数组，可以传入多个plugin，另外需要注意plugin是可以带参数的，所以plugins属性传入的必须为new实例。