webpack中main文件打包原理简易版

最新推荐文章于 2024-06-26 10:40:40 发布

写代码就不开心

最新推荐文章于 2024-06-26 10:40:40 发布

阅读量448

点赞数 1

文章标签： js javascript webpack

本文链接：https://blog.csdn.net/weixin_46681026/article/details/118836338

版权

本文探讨了webpack打包过程中main文件的处理，如何避免全局变量污染，模块导入的运行及缓存机制，并解析了eval()函数在打包过程中的作用，帮助理解webpack如何将多个模块整合到main.js中。

摘要由CSDN通过智能技术生成

main编译

比如有两有个模块，打包合并成main.js

// 里面的代码
console.log("module a");
module.exports = "a";

// 里面的代码
console.log("index module");
var a = require("./a");
console.log(a);

首先我们要理解导入一个文件就是运行这个文件，把这个文件的代码运行之后得到模块导出结果。

这里我们就可以使用立即执行函数来避免污染全局变量

(function (){
   

})( )

var a = require("./a");
// 变成
var a = require("./src/a.js");

// 因为我们在递归的时候需要用到key值。才能定位到这个模块函数。

把它的绝对地址当成key值是为了区分而已，不是为了引用。
所以使用webpack打包之后就只跟main文件有关系而已了。

var modules = {
   
    // module可以引入,
    // 有些模块可能会直接使用exports导出，所以也可以传进去。
    // 就模块内需要用到函数都可以使用参数传进去
    "./src/a.js" : function (module, exports

关注