建议在github阅读
1.webpack打包策略分析
1.1 单入口文件
通过下面的打包结果，并结合下面说的多入口文件打包问题，应该是不难理解的。
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var util1 = __webpack_require__(2)
var util2 = __webpack_require__(3)
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
var util2 = __webpack_require__(3)
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = {"name": "util2.js"}
/***/ }
/******/ ]);这里只是需要注意一点，就是虽然有entry.js和util1.js同时引用了util2模块，但是我们最终也只会为util2生成一个id！webpack打包的原理为，在入口文件中，对每个require资源文件配置一个id, 也 就是说，对于同一个资源,就算是require多次的话，它的id也是一样的，所以无论在多少个文件中 require，它都只会打包一份。
1.2 多入口文件打包分析
1.2.1 多入口文件打包ID分配
首先webpack.config.js配置如下:
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack = require('webpack')
module.exports = {
entry: {
index: ['./src/js1/entry.js'], //配置两个入口
index2: ['./src/js1/entry2.js']
},
output: {
path: path.resolve(__dirname, './dist/static'),
publicPath: 'static/',
filename: '[name].[chunkhash].js'
},
resolve: {
extensions: ['', '.js', '.less', '.swig', '.html']
},
module: {
loaders: [
]
},
plugins: [
]
}
此时会在./dist/static目录中生成两个文件，分别对应于index.[chunkhash].js和index2.[chunkhash].js。
其中index.[chunkhash].js文件内容如下:
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var util1 = __webpack_require__(2)
var util2 = __webpack_require__(3)
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
var util2 = __webpack_require__(3)
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = {"name": "util2.js"}
/***/ }
/******/ ]);很显然，入口文件的id是1,而入口文件引用的资源的id依次增加。同时注意一点：
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },也就是id为0的打包模块其实是对入口文件调用的模块，其中通过module.exports对外导出!
其中index2.[chunkhash].js文件内容如下:
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(4);
/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports) {
module.exports = {"name": "util2.js"}
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var util2 = __webpack_require__(3)
setTimeout(function() {console.log(util2.name), 2000})
/***/ }
/******/ ]);首先，和上面分析的一样，我们对入口文件调用的模块id是0，通过module.exports向外导出。
/* 4 */
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ },
/* 5 */,
/* 6 */,
/* 7 */,
/* 8 */
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ },
/* 9 */,
/* 10 */
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }很清楚的知道id为5，6，7，8的情况没有被分配，因为没有被打包进来，这在单入口文件中也是存在的，而和extract-text-webpack-plugin没有关系！而之所以是这样，我猜测（需要证实）是webpack在打包的过程中自己生成了很多文件，而这些文件也分配了ID值，但是在我们的文件中并不需要这些模块，所以就没有引入为空！这可能和webpack自身的功能有关系。
1.2.2 多入口文件打包结果
下面给出了控制台打包信息:
其中asset部分就是生产的文件的文件名，是name+chunkhash的格式;chunks就是对生成的文件的数字标注;chunkName就是我们在webpack配置中指定;
结合上面的分析很容易知道，对于入口文件调用的模块Asset(打包资源)部分都是0,而其余资源的部分都是webpac打包后生成的id值！
1.2.3 CommonChunkPlugin插件作用
之前提到过，每个入口文件，都会独立打包自己依赖的模块，那就会造成很多重复打包的模块，有没有一种方法 能把多个入口文件中，共同依赖的部分给独立出来呢？ 肯定是有的 CommonsChunkPlugin
这个插件使用非常简单，它原理就是把多个入口共同的依赖都给定义成一个新入口。为何我这里说是定义成新入口呢，因为这个名字不仅仅对应着js 而且对于着和它相关的css等，比如 HtmlWebpackPlugin 中 就能体现出来，可以它的 chunks中 加入 common 新入口，它会自动把common 的css也导入html
什么是chunkid?
可以参见控制台的部分：
从图中可以看到，我们最终输出的common.js也是会有自己独立的chunkid的(也就是chunks列)，虽然我们在webpack的entry配置中并没有指明(每个chunkid对应的是一个js文件):
entry: {
index: ['./src/js1/entry.js'],
index2: ['./src/js1/entry2.js']
},这是CommonChunkPlugin插件完成的。为何要出来一个chunkid呢？ 这个chunkid的作用就是，标记这个js文件是否已经加载过了。我们首先分析下这个plugin抽取出来的多个入口公共的代码部分:
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ var parentJsonpFunction = window["webpackJsonp"];
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, callbacks = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(installedChunks[chunkId])//非0表示没有加载完成,否则是数组，数组元素是函数
/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/ installedChunks[chunkId] = 0;//加载完成
/******/ }
/******/ for(moduleId in moreModules) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }//modules中得到的都是函数，in遍历数组的时候key是下标,此处modules存储的是键值是每一个函数
/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
//首先调用父级jsonpFunction
/******/ while(callbacks.length)
/******/ callbacks.shift().call(null, __webpack_require__);
//得到callback数组中的函数并调用，每一个回调函数传入一个__webpack_require__就可以了
/******/ if(moreModules[0]) {
/******/ installedModules[0] = 0;
/******/ return __webpack_require__(0);
/******/ }
//加载第一个模块0，这个模块是我们的入口文件的exports对象，相当于执行模块了!其他的模块只是打包进去，这个0表示直接执行了
/******/ };
/******/ // The module cache
/******/ var installedModules = {};
/******/ // object to store loaded and loading chunks
/******/ // "0" means "already loaded"
/******/ // Array means "loading", array contains callbacks
//如果是正在加载那么这里就是一个数组，而且数组中包含的是回调函数
/******/ var installedChunks = {
/******/ 2:0 //common.js的chunkID是2表示一开始的时候就加载完成，因为他是通用模块必须先加载，然后加载其他的
/******/ };
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
//判断是否在缓存中存在
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
//入口执行模块是函数签名是function(module, exports, __webpack_require__)
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
//模块加载完成
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // This file contains only the entry chunk.
/******/ // The chunk loading function for additional chunks
/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/ // "0" is the signal for "already loaded"
/******/ if(installedChunks[chunkId] === 0)
/******/ return callback.call(null, __webpack_require__);
/******/ // an array means "currently loading".
/******/ if(installedChunks[chunkId] !== undefined) {
/******/ installedChunks[chunkId].push(callback);
/******/ } else {
/******/ // start chunk loading
/******/ installedChunks[chunkId] = [callback];
/******/ var head = document.getElementsByTagName('head')[0];
/******/ var script = document.createElement('script');
/******/ script.type = 'text/javascript';
/******/ script.charset = 'utf-8';
/******/ script.async = true;
/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"index","1":"index2"}[chunkId]||chunkId) + "." + {"0":"2a3a9ad51d7007de1a89","1":"e7a73c1617697d3e2912"}[chunkId] + ".js";
/******/ head.appendChild(script);
/******/ }
/******/ };
/******/ // expose the modules object (__webpack_modules__)
//向外导出的modules包含了common.js这个文件，同时也包含我们的moreModules数组中的modules
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
//webpack缓存模块
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
//webpack的__webpack_public_path__
/******/ __webpack_require__.p = "static/";
/******/ })
/************************************************************************/
/******/ ({
/***/ 3:
/***/ function(module, exports) {
module.exports = {"name": "util2.js"}
/***/ }
/******/ });（1）webpackJsonp第一个参数是chunkId，但是我们的CommonChunkPlugin抽取出来的部分是作为modules参数传入的，而且是一个引用，所以每次加载一个chunk的时候,他们引用的都是同一个
(2)这里要看清楚什么是chunk，什么是module，在webpackJsonp这个函数中第一个参数就是chunkId对应于chunk，而而第二个参数就是chunk中被打包进去的多个module,这也是为什么下面的webpackJsonpCallback的函数签名是如下：
js
webpackJsonpCallback(chunkIds, moreModules)
但是仔细想想，我们的common.js其实更像是一个module而不是chunk(因为他会被modules形参接受)。但是从控制台中的输出你可以知道其实webpack已经把它当做chunk了。我们common.js虽然没有在entry中配置，但是我们实际上在common.js中被当做自执行函数的参数传入最后放在modules中，以后再每一个chunk中require公有的这个文件的时候就直接require这个参数指定的内容就可以了
(3)modules得到的是一个chunk中所有的moreModules以及共有的commmon.js这个module（执行的时候只要运行moreModules[0]就可以了）。每次加载一个chunk，其modules最终都会包含我们的CommonChunkPlugin抽取出来的部分
（4）webpack_require方法最后返回的是modules[moduleId].call(module.exports, module, module.exports, webpack_require);也就是执行了id为0的入口文件的exports后得到的对象，这就是这个模块的最后返回值
（5）在html中必须先加载common.js文件
<script src="{{ root }}common.js"><\/script>
<script src="{{ root }}index.js"><\/script>下面是每一个打包后的文件对common.js部分的依赖:
webpackJsonp([1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(4);
/***/ },
/* 1 */,
/* 2 */,
/* 3 */,
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var util2 = __webpack_require__(3)
setTimeout(function() {console.log(util2.name), 2000})
/***/ }
]);什么是moduleid?
结合上面的chunkid应该不难理解
959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
