Skip to content

liangklfang/webpack_package

BranchesTags
 
 

Repository files navigation

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就是对生成的文件的数字标注(chunkid);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参数传入的(在webpack中每一个文件都是一个chunk,所以这个common.js也有自己的chunkid)，而且是一个引用，所以每次加载一个chunk的时候,他们引用的都是同一个(防止一个页面重复加载一个模块的代码，如多次加载jQuery)。

(2)这里要看清楚什么是chunk，什么是module，在webpackJsonp这个函数中第一个参数就是chunkId对应于chunk，而而第二个参数就是chunk中被打包进去的多个module,这也是为什么下面的webpackJsonpCallback的函数签名是如下：

webpackJsonpCallback(chunkIds, moreModules)

但是仔细想想，我们的common.js其实更像是一个module而不是chunk(因为他会被modules形参接受)。但是从控制台中的输出你可以知道其实webpack已经把它当做chunk了(webpack中每一个文件都是一个chunk)。我们common.js虽然没有在entry中配置，但是我们实际上在common.js中被当做自执行函数的参数传入最后放在modules中，以后再每一个chunk中require公有的这个文件的时候就直接require这个参数指定的内容就可以了

(3)modules集合最终得到的是一个chunk中所有的moreModules（该chunk独有的module）以及共有的commmon.js这个module（执行的时候只要运行moreModules[0]就可以了）。每次加载一个chunk，其modules最终都会包含我们的CommonChunkPlugin抽取出来的部分。例如我们的例子，直接执行下面代码:

webpack --profile --json > stats.json

然后在visualizer中打开你就会看到如下的图形:

我们知道chunkId为0，1的模块父级chunk是'main'，而'main'的父级chunk是'vendor'，其实我这里关心的是打包后的代码，其如下:

0.bundle.js(只是含有非公有代码部分)

webpackJsonp([0,3],[
/* 0 */,
/* 1 */
/***/ (function(module, exports, __webpack_require__) {})])

"use strict";

其表示我们的0.bundle.js也会加载common.js

1.bundle.js(只是含有非公有代码部分)

webpackJsonp([1,3],[
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";})])

其表示我们的1.bundle.js也会加载common.js

bundle.js(业务逻辑代码)

webpackJsonp([2,3],{
/***/ 2:
/***/ (function(module, exports, __webpack_require__) {

"use strict";
//code splitting
if (document.querySelectorAll('a').length) {
    __webpack_require__.e/* require.ensure */(1).then((function () {
        var Button = __webpack_require__(0).default;
        var button = new Button('google.com');
        button.render('a');
    }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
}

if (document.querySelectorAll('h1').length) {
    __webpack_require__.e/* require.ensure */(0).then((function () {
        var Header = __webpack_require__(1).default;
        new Header().render('h1');
    }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
}
/***/ })

},[2]);

其表示我们的bundle.js也会加载common.js,而这里webpackJsonp有三个参数，和上面的webpackJsonp作用具有本质差别。因此，当你加载这个main.js的时候，其并不是马上加载common.js，但是只有满足了这个条件后，加载了其他的chunk都会同时把common.js加载下来，这就达到了按需加载的目的!所以webpackJsonp函数第一个参数数组中的第二个元素后都是表示该chunk依赖的其他的chunk集合!

（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})

/***/ }
]);

通过这里你因该会知道，在执行commonChunkPlugin之前是不存在我们的common.js的，而加上了common.js后，所有的chunk之间的关系都是要维护的!

什么是moduleid?

结合上面的chunkid应该不难理解

2.参考资料

webpack打包原理解析

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

4 stars

Watchers

1 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.3%
  • HTML 8.2%
  • CSS 2.5%