第31天：WebPack 与 jQuery 安全

一、WebPack 打包器

（一）使用原因

WebPack 能解决传统前端开发中 JS 依赖顺序混乱的问题，还具备以下核心优势：

模块化支持：将代码拆分为模块，提升可维护性与复用性。
资源打包：把 JS、CSS、图片等资源整合成静态文件，减少网络请求。
代码分割：按需加载代码块，加快初始页面加载速度。
资源优化：压缩代码、处理预处理器、优化图像等。
开发环境支持：提供热模块替换、源代码映射等功能，提升开发效率。

（二）使用步骤

准备需打包文件

目录结构：创建 src 目录，内含 js 子目录（放 sum.js、count.js）和 main.js（入口文件）。

sum.js：

复制代码

export default function sum(x, y) {
  return x + y;
}

count.js：

复制代码

export default function count(x, y) {
  return x - y;
}

main.js：

复制代码

import count from "./js/count";
import sum from "./js/sum";

console.log(sum(1, 2));
console.log(count(1, 2));

同级创建 index.html，用于引入打包后的文件：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

安装 WebPack 库

执行命令：npm i webpack webpack-cli -g，全局安装 WebPack 及命令行工具。

创建 WebPack 配置文件

在项目根目录创建 webpack.config.js（文件名固定），配置如下：

复制代码

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/main.js',
  output: {
    // 输出路径
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: 'bundle.js',
    // 每次构建前清理输出目录
    clean: true,
  },
  // 打包模式：development（开发，易源码泄露）或 production（生产，代码优化）
  mode: "development"
};

运行打包命令

执行 npx webpack，打包成功后，在 index.html 中引用打包好的 ./dist/bundle.js：

复制代码

<body>
  <script src="./dist/bundle.js"></script>
</body>

（三）安全问题

源码泄漏风险

development 模式：会启用开发工具，易导致源码泄露。
production 模式：会进行代码优化，代码极简化，相对安全。

模糊提取安全检查：PackerFuzzer

工具地址：Packer-Fuzzer
功能：自动模糊提取目标站点的 API 及参数，检测未授权访问、敏感信息泄露、CORS、SQL 注入等七大漏洞，支持生成多格式扫描报告。
背景：WebPack 打包的 JS 文件数量多、代码量大，手工测试不便，该工具可提升测试效率。

二、第三方库：jQuery

（一）使用

jQuery 是快速简洁的 JavaScript 框架，封装常用功能，优化 HTML 操作、事件处理等。

引用路径示例：jQuery 引用。

（二）安全问题

版本漏洞：如 3.4.1 版本存在 XSS 植入风险，3.5.1 版本修复。
检测工具：jQuery 漏洞检测，可测试 CVE-2020-11022、CVE-2020-11023 等漏洞。