五矿集团webpack扣代码

一 什么是webpack?

什么是webpack,先看看ai的介绍:

Webpack 是一个模块打包工具,它可以将多个 JS、CSS、图片等资源打包成一个或多个文件,并支持代码压缩、热更新、按需加载等功能。

在早期的网页开发中,我们直接写 HTML + JS 文件,然后通过 <script> 标签引入,但随着项目变大,出现了一些问题:

问题秒速
文件太多每个功能都写成单独的 JS 文件,加载慢
依赖混乱A.js 依赖 B.js,加载顺序容易出错
难以维护代码结构复杂,不利于团队协作
不兼容新语法ES6/7/8 新特性不能直接运行在旧浏览器上

使用webpack的页面大概长这样

在这里插入图片描述

那好,怎么判断一个网页是否使用了webpack

第一如果,一个网页的index.htlm没有大量css样式和大量的div,而是在body里面引入几条js,那么大概率就是webpack

当然还有更可靠的办法,看有没有自执行函数+模块。这次说的这个网站就是这样的

// webPack

!function (e) {
    // 缓存已加载的模块
    var c = {};
    // 模块加载函数
    function n(t) {
        // 如果模块未加载,则初始化
        var a = c[t] = {
            i: t,       // 模块ID 2
            l: !1,      // 是否已加载 (loaded)
            exports: {} // 模块导出的内容
        };
        console.log(a) // 打印模块信息
        /*
        执行中的模块代码,并传入 require, exports, module 参数
        相当于调用:
            // module = a(模块对象),exports = a.exports(模块的导出对象),require = n(加载函数)
            function (module, exports, require) {
                console.log("3"); // 模块 2 的代码
            }
        */
        return e[t].call(a.exports, a, a.exports, n),
            // 标记为已加载,a.l = true; 这里模块 2 没有导出内容,所以返回 {}
            a.l = !0;
            // 返回模块的 exports
            a.exports;
    }
    // 将模块映射挂载到 n 上(类似 webpack 的 __webpack_modules__)
    n.m = e;
    // 加载并执行模块 2
    n(2);
}([
    function () {
        console.log("0")
    },  // 模块0
    function () {
        console.log("1")
    },  // 模块1
    function () {
        console.log("2")
    },  // 模块2
]);

二 xhr断点定位加密位置

这里可以通过翻页查看所有的招投标信息

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

设置断点后继续下一页就断住了

在这里插入图片描述

三 跟栈

招了一辈子加密,终于找到了,其实搜索t.encryptLong(JSON.stringify(a))可以马上定位到。别问为什么?因为我已经提取找到了

然后看这个加密结果每次都不一样,很明显是个RSA呗。别问为什么不是 AES。前面的publicKey看着都不像标准的rsa公钥,后续的js更明显。

在这里插入图片描述

这个a就是被加密的参数:在这里插入图片描述

简单概括就是固定字符 + 页码 + md5 + 时间戳

然后把代码扣过来,运行的时候补啥,不同多说。关键是 t = new d["a"]是一个对象,


// t = new d["a"]
r = n.data
t.setPublicKey(r)
a = m(m({}, e), {}, {
    sign: B()(JSON.stringify(e)),
    timeStamp: +new Date
})
s = t.encryptLong(JSON.stringify(a))

在这里插入图片描述

四 扣webpack

上翻,因为当前作用域没有,那就是在上面

在这里插入图片描述

d = t("9816")是一个模块,页面第一次刷新时加载

这里F5刷新一下网页

在这里插入图片描述

在这里插入图片描述

接下来把代码扣下来,省略多次步骤,当扣之后你会发现报错

在这里插入图片描述

回到加载器的位置,打印一下这个A[e].call的e,看看是何方神圣?

在这里插入图片描述

在这里插入图片描述

是一个js模块没有加载,那就去找

在这里插入图片描述

最后就是补全代码,出值了,字符长度和网页上的一致就对了

在这里插入图片描述

### 如何简化 Webpack 配置代码的最佳实践 Webpack 是一个功能强大但复杂的工具,其配置文件可能变得冗长而难以维护。为了简化 Webpack 配置并提高可读性和可维护性,可以采用以下方法: #### 1. **分离开发和生产环境配置** 通过创建独立的配置文件来区分不同环境的需求是一个常见的做法。例如,`webpack.dev.js` 可以专注于快速迭代和热更新的功能,而 `webpack.prod.js` 则关注于优化和压缩资源[^4]。 ```javascript // webpack.dev.js 开发环境配置 const { merge } = require('webpack-merge'); const commonConfig = require('./webpack.common'); module.exports = merge(commonConfig, { mode: 'development', devtool: 'inline-source-map', // 提供更好的调试支持 }); // webpack.prod.js 生产环境配置 const TerserPlugin = require('terser-webpack-plugin'); const { merge } = require('webpack-merge'); const commonConfig = require('./webpack.common'); module.exports = merge(commonConfig, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin({ extractComments: false, // 去除不必要的注释 }), ], }, }); ``` #### 2. **提取公共配置** 利用 `webpack-merge` 插件将通用部分抽取到单独的文件中(如 `webpack.common.js`),从而减少重复代码。 ```javascript // webpack.common.js 公共配置 const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: '[name].[contenthash].js', path: path.resolve(__dirname, 'dist'), }, }; ``` #### 3. **使用零配置模式或预设工具** 如果项目不需要高度定制化的配置,可以选择基于 Webpack 的框架或工具链,比如 Create React App 或 Vite。这些工具提供了开箱即用的支持,减少了手动调整的时间成本[^2]。 #### 4. **Code Splitting 自动化** Webpack 4 引入了更简洁的 Code Splitting 方式,无需显式定义入口点即可实现动态加载模块[^1]。可以通过设置 `splitChunks` 来进一步提升性能[^3]。 ```javascript optimization: { splitChunks: { chunks: 'all', // 对所有类型的 chunk 进行分割 }, }, ``` #### 5. **移除非必要插件** 仅保留当前阶段真正需要使用的插件,避免引入过多依赖项增加复杂度。对于生产构建来说,重点在于资源压缩、长期缓存以及 CDN 支持等方面。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值