webpack的工作原理

webpack处理文件的过程可以分为两个维度：文件间的关系和文件的内容。文件间的关系处理，主要是通过文件和模块标记方法来实现；文件内容的处理主要通过loaders和plugins来处理。

1.文件内容处理

在webpack的世界里，js是一等公民，是处理的入口，其他资源都是在js中通过类似require的方式引入。webpack虽然支持命令行操作，但是一般将配置写在webpack.conf.js文件中，文件内容是一个配置对象，基本配置项是：entry、ouput、module、plugins属性。

entry与output

这里引入了一个chunk的概念，chunk表示一个文件，默认情况下webpack的输入是一个入口文件，输出也是一个文件，这个文件就是一个chunk，chunkId就是产出时给每个文件一个唯一标识id，chunkhash就是文件内容的md5值，name就是在entry中指定的key值。

输出：

module

moudle对应loader（加载器 ）的配置，主要对指定类型的文件进行操作，举个例子：js类型的文件和css文件需要不同的loader来处理。最常用的加载器是eslint-loader和babel-loader。

其中，loader的options也可以单独使用options属性来配置

 另外通常babel-loader的配置项可以写在根目录下的.babelrc文件中

plugins

plugins用于扩展webpack的功能，相比着loader更加灵活，不用指定文件类型。常用的plugins有三个，html-webpack-plugin、commonChunkPlugin和ExtractTextPlugin。

（1）html-webpack-plugin：生成入口html文件，由于webpack输出的js文件需要插入到html文件，以构成web入口；该插件默认有一个html文件模板，但是一般情况下需要为其指定一个html文件作为模板，webpack打包输出的js文件会插入到body结束标签之前。

1 2 3 4 5 6 7 8 9 10 11

var HtmlwebpackPlugin = require(‘html-webpack-plugin‘);   module.exports = {     ...     plugins: [         new HtmlwebpackPlugin({<br>　　　　　　　filename: ‘collection.html‘,   // 入口html文件名             template: ‘./src/index.html‘  // 入口html文件模板         })     ]     ...    };

最终输出的入口文件如下图，生成的入口文件是在模板文件的基础上插入了打包后的js引用标签。

 

（2）commonChunkPlugin：主要提取公共业务代码与第三方类库代码

在介绍entry的时候，提到了chunk的概念，chunk指的就是一个代码块，即一个js文件。默认的情况下webpack只产生entry中指定的代码块，chunk的个数和entry中的key值个数相等，即单入口的情况下，默认只产出一个chunk。但是我们通常希望将入口之间的通用代码和第三方类库的代码提取出来，单独作为一个js文件来引用，第三方的文件一般很少变动，可以利用缓存机制把相关内容缓存起来，通用代码则可以避免重复加载。

commonChunkPlugin的处理级别是chunk级别，通过指定chunks（输入的文件）+minChunks（提取过滤器：一般是被引用的次数）+name（输出的文件名）来完成操作。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

module.exports = {     ...     plugins: [         // 把通过npm包引用的第三方类库从入口文件中提取出来         new webpack.optimize.CommonsChunkPlugin({             name: ‘vendor‘,             minChunks: function (module, count) {                 // 指定范围是js文件来自node_modules                 return (module.resource && /\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, ‘../node_modules‘)) === 0);             }         }),         // 把webpack的module管理相关基础代码从vendor中提取到manifest         new webpack.optimize.CommonsChunkPlugin({           name: ‘manifest‘,           chunks: [‘vendor‘]         })     ]     ...    };

js是一等公民，webpack默认不产出css文件，产出css文件需要依赖ExtractTextPlugin插件来完成。

2.文件间的关系处理

理清这个过程得倒推，先看一下经webpack处理后的js文件，下面的例子中主要涉及3个产出文件，manifest是webpack的module管理代码，vendor是第三方类库文件，collection是入口文件，加载的顺序是manifest-》vendor-》collection。

查看三个文件的内容可知：

vendor和collection的内容都是一个函数，类似jsonp请求回来的返回值。下面分别是vendor和collection中的代码。

从以上两个文件可以发现出一个规律，

（1）每个文件的chunkid放在第一个参数；

（2）模块都放在第二个参数，每个模块都有对应的id，数组都是从moduleid=0开始，依次增加，如果该模块不在该文件中，则使用空值来代替；

（3）入口文件中的函数多了一个参数，参数里面传入了一个moduleid，视为入口模块。

接下来，我们看一下manifest文件的内容，来看看webpackJsonp函数究竟是怎么运行的。

总的来说是利用闭包传入了几个自由变量：

modules：模块本身是一个函数，modules用于存储模块函数数组。

installedModules：用于缓存模块的返回值，即module.exports。

installedChunks：用于标记chunk文件是否已经被加载。

webpackJsonp：chunk文件加载后的callback函数，主要将文件中的模块存储到modules对象中，同时标记chunk文件的下载情况，对于入口chunk来说，等所有的模块都放入modules之后，执行入口模块函数。

__webpack_require__：模块加载函数，加载的策略是：根据moduleid读取，优先读取缓存installedModules，读取失败则读取modules，获取返回值，然后进行缓存。

总体而言，下图可以简易的描述出webpack打包过程，该过程主要分为三个阶段：module构建、trunk构建和产出三个阶段。