一、WebPack 打包器

（一）使用原因

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

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

（二）使用步骤

1. 准备需打包文件

  • 目录结构：创建 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>

2. 安装 WebPack 库

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

3. 创建 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"
};

4. 运行打包命令

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

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

（三）安全问题

1. 源码泄漏风险

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

2. 模糊提取安全检查：PackerFuzzer

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

二、第三方库：jQuery

（一）使用

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

（二）安全问题

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

 

# webpack # jquery # 安全
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

SpringBoot+Vue 甘肃非物质文化网站平台完整项目源码+SQL脚本+接口文档【Java Web毕设】

avatar 2048 AI社区
cover

网上购物商城系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】

avatar 2048 AI社区

第九篇 外包与开源新策略：在AI时代如何界定核心生产力

AI时代外包模式的终结与转型 摘要：2010年代盛行的外包模式在AI时代面临根本性变革。过去依靠人力套利的"平庸劳动"外包（如CRUD页面开发）正被AI代码生成工具取代，后者能以更高效率产出更优质代码。技术管理者需重新界定核心生产力：从代码转向数据和领域知识，建立以开源模型为基础的数据护城河。未来外包将升级为数据标注等AI相关服务，而系统集成能力和私有数据治理成为新的竞争壁垒。

avatar 2048 AI社区