ITPub博客

首页 > IT职业 > IT图书 > webpack打包后的代码理解(多个打包入口)

webpack打包后的代码理解(多个打包入口)

IT图书 作者:canyoumail 时间:2021-09-09 09:01:41 0 删除 编辑

假设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/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-13

  • 博文量
    76
  • 访问量
    463