21-webpack介绍

嫂子的姐夫2025-11-06 8:30

webpack是一种包管理工具，将一切视为模块，一般怎么判断一个网站可能有webpack呢？

当网站元素中很多外联式js文件时就可能是webpack（80%），如图：

webpack基本结构

下面先来写一下webpack基本代码：

javascript 复制代码

// webpack
!function (e) {
    function aa(t) {
        return e[t].call()
    }

    aa(0)

}([
    function () {
        console.log("hello world")
    }
])

介绍一下逻辑：先是一个自执行函数，自执行函数后面的括号里传入一个打印hello world的函数，将其传给e，通过调用aa函数来返回e里面的第t个函数并调用，这里是第零个函数(打印hello world的函数)

webpack里有两个东西：模块和加载器↓ ↓ ↓

这里面的方括号是数组的形式传递模块，还有一种形式为对象传递：

这就像py中的字典取值似的，取出函数并调用，还有可能是一个单独的js文件（文件打包）通过加载器调用：

开头是这个，重写了一个push方法将所有方法填入到webpack自执行函数的形参中然后调用

webpack经常用到的知识点

1.取出加载器时在全局设置一个变量来接收加载器，使加载器能全局调用

2.node的环境与浏览器不同，我们通常会在最上面写上window = global

3.有一个xx.xx = 自执行函数形参来缓存加载器，我们找调用的函数时可以xx.xx $'xxx'$ 或者xx.xx $num$