首页 > IT职业 > IT图书 > webpack打包后的代码理解(多个打包入口)
假设webpack.config.js下的入口配置如下:
var path=require("path");
module.exports={
entry:{main:"./src/script/main.js",a:"./src/script/a.js"},
output:{
path:path.resolve(__dirname ,"dist/js"),
filename:"[name].js"
},
} 这里面有两个入口文件,如果main.js和a.js里面并没有共同依赖某个文件,那么打包后分别创建两个打包后的文件。一个main.js,一个a.js.
本文想说的是如果main.js 和a.js里面有共同依赖某个文件时 的代码理解。如:
a.js
require("./b");
console.log("a");
main.js
require("./b");
console.log("helloworld"); b.js
console.log("b");
这种情况下 如果按照最开始的代码直接打包 会出现冗余。为了解决这个问题,要引入一个插件,代码如下:
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var path=require("path");
module.exports={
entry:{main:"./src/script/main.js",a:"./src/script/a.js"},
output:{
path:path.resolve(__dirname ,"dist/js"),
filename:"[name].js"
},
plugins:[
new CommonsChunkPlugin({name:"common"})
]
} 引入这个插件打包后 生成三个文件 一个是a.js 一个main.js 一个conmmon.js
common.js的代码如下:
(function(modules) { // webpackBootstrap
// install a JSONP callback for chunk loading
/******/ var parentJsonpFunction = window["webpackJsonp"];
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
/******/ for(;i 这是一个立即执行的匿名函数,参数就是打包后的b模块,(ps:它的模块ID被分配为0.)。这个匿名函数 将b模块保存在变量modules数组中,定义了一个全局函数webpackJsonp 和局部函数__webpack_require__。
a.js打包后的代码:
webpackJsonp([1],[
/* 0 */,
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(0);
console.log("a");
/***/ })
],[1]); 这个模块就是调用webpackJsonp函数,传了三个参数。webpackJSON
这个函数在这里做了几件事,一个是把a模块也保存在modules这个数组中。(ps:它在数组中的下标就是a模块ID),一个是调用webpack_require(1);1是模块a的id,这个函数可以理解成调用a模块,a模块的代码分两个部分,一个执行a模块所依赖的模块:即webpack_require(这里是a模块所依赖的模块的ID),一个是执行a.js。
可以看出webpack_require(这里是a模块所依赖的模块的ID)这个函数又分成连个部分,就这样层层向下网状调用webpack_require这个函数。从而将模块组合在一起。
main.js也是类似。
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3005/viewspace-2798726/ ,如需转载,请注明出处,否则将追究法律责任。