认识Webpack

要了解Webpack，首先要知道前端模块化开发的概念

前端模块化

模块化的目的是使代码可以重用，模块化在任何开发中都是必不可少的。前端的模块化是Node.js带来的新产物，若干年前，前端模块化的需求并不是很强烈，因为在浏览器里运行的逻辑都比较简单。随着Node.js的出现，JavaScript开始在后端发挥作用，为了代码重用，模块化就变得不可或缺。随着前端快速发展，前端业务越来越复杂，模块化的需求开始出现。

为了实现模块化，出现了用于JavaScript模块管理的两大流行规范：CommonJS和AMD。前者定义的是模块的同步加载，主要用于Node.js。同步加载在前端会导致整个页面等待，对前端并不适用，便出现了AMD。AMD采用异步加载方式，通过RequireJS等工具适用于前端。以RequireJS为例，这是一种在线“编译”模块的方案，相当于在浏览器中先加载一个AMD解释器，使浏览器认识define、exports、module等相关命令，来实现模块化。后来ES 6提供了对模块的原生支持，它的目标是创建一种CommonJS和AMD使用者都愿意接受的方式，既拥有简洁的语法，又支持异步加载和配置模块加载。

而目前更通用的是browserify、webpack等技术，是一个预编译模块的方案。这个方案更加智能，因为它是在发布前预编译好的，不需要在浏览器中加载解释器。另外，直接写AMD或ES 6的模块化代码，它都能编译成浏览器识别的JavaScript代码。甚至CommonJS规范的模块化，browserify、webpack也可以转换成浏览器使用的形式。webpack相当于加强版browserify，诞生伊始，瞄准的就是大型单页应用，而且其对React的支持是最好的，所以在本书中主要介绍webpack。

Webpack介绍

webpack是一个供浏览器环境使用的模块打包工具。webpack将项目中用到的一切静态资源都视为模块，模块之间可以互相依赖，webpack对它们进行统一的管理及打包发布。下面引用webpack官方图片来说明webpack的作用。

webpack.jpg

从图中可以看出，webpack的作用是对项目中的静态资源进行统一管理，为项目的发布提供最优的打包和部署方案，可以把应用中的js、css、图片等资源集中打成一个或多个包文件。它具备编译打包css、预处理css、编译js和处理图片等许多功能，支持AMD和CommonJS规范，以及多种系统模块，现在已成为前端打包的主流工具。

webpack的主要特性如下：

同时支持CommonJS和AMD模块。
串联式模块加载器及插件机制，具有更好的灵活性和扩展性，例如对CoffeeScript、ES 6的支持。
可以基于配置或者智能分析打包成多个文件，实现分别满足公共模块和按需加载的需要。
支持对css、图片等资源进行打包，无须依靠grunt或gulp等构建工具，简化工程配置。
开发时在内存中完成打包，性能更高，完全可以支持开发过程的实时打包需求。
对sourcemap有很好的支持，易于调试。

webpack的主要API如下：

1、Node

虽然大多数用户只要用到配置文件足矣，然而对编译的更细粒度控制，则需要通过 Node 接口实现。包括传递多个配置文件、可编程方式的编译执行或观察文件，以及收集概要信息。

2、loader

loader 是转译模块源代码的转换规则。 loader 被编写为，接受源代码作为参数的函数，并返回这些转换过的新版本代码。

3、plugin

插件接口可以帮助用户直接触及到编译过程(compilation process)。插件可以将处理函数(handler)注册到编译过程中的不同事件点上运行的生命周期钩子函数上。当执行每个钩子时，插件能够完全访问到编译(compilation)的当前状态。

4、entry和context

entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串。
context 基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader

context: path.resolve(__dirname, "app")

5、output

output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」