浅谈webpack打包原理

浅谈webpack打包原理

模块化机制

webpack并不强制你使用某种模块化方案，而是经过兼容全部模块化方案让你无痛接入项目。有了webpack，你能够随意选择你喜欢的模块化方案，至于怎么处理模块之间的依赖关系及如何按需打包，webpack会帮你处理好的。

关于模块化的一些内容，能够看看我以前的文章：js的模块化进程

核心思想：

1. 一切皆模块： 
   正如js文件能够是一个“模块（module）”同样，其余的（如css、image或html）文件也可视做模 块。所以，你能够require(‘myJSfile.js’)亦能够require(‘myCSSfile.css’)。这意味着咱们能够将事物（业务）分割成更小的易于管理的片断，从而达到重复利用等的目的。
2. 按需加载： 
   传统的模块打包工具（module bundlers）最终将全部的模块编译生成一个庞大的bundle.js文件。可是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会致使应用一直处于加载中状态。所以Webpack使用许多特性来分割代码而后生成多个“bundle”文件，并且异步加载部分代码以实现按需加载。

文件管理

• 每一个文件都是一个资源，能够用require/import导入js
• 每一个入口文件会把本身所依赖(即require)的资源所有打包在一块儿，一个资源屡次引用的话，只会打包一份
• 对于多个入口的状况，其实就是分别独立的执行单个入口状况，每一个入口文件不相干(可用CommonsChunkPlugin优化)

打包原理

把全部依赖打包成一个bundle.js文件，经过代码分割成单元片断并按需加载。

如图，entry.js是入口文件，调用了util1.js和util2.js，而util1.js又调用了util2.js。

打包后的bundle.js例子

/******/ ([
/* 0 */     //模块id
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);     //require资源文件id
    __webpack_require__(2);

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
    //util1.js文件
    __webpack_require__(2);
    var util1=1;
    exports.util1=util1;

/***/ },
/* 2 */
/***/ function(module, exports) {
    //util2.js文件
    var util2=1;
    exports.util2=util2;

/***/ }
...
...
/******/ ]);

1. bundle.js是以模块 id 为记号，经过函数把各个文件依赖封装达到分割效果，如上代码 id 为 0 表示 entry 模块须要的依赖， 1 表示 util1模块须要的依赖
2. require资源文件 id 表示该文件须要加载的各个模块，如上代码_webpack_require__(1) 表示 util1.js 模块，__webpack_require__(2) 表示 util2.js 模块
3. exports.util1=util1 模块化的体现，输出该模块