WebPack 打包器

基本概念

  1. Webpack 是什么？

    Webpack 是一个 前端资源打包工具，主要用于将 JavaScript、CSS、图片等各种资源模块化并优化打包，最终输出可供浏览器使用的文件。

  2. 为什么要使用 Webpack？

    1）模块化支持：Webpack 支持将应用程序拆分为模块，使开发人员能够使用模块化的方式组织和管理代码。模块化能够提高代码的可维护性、重用性和可测试性。

    • 例如：src目录下有 1.js 和 2.js

      1
      2
      3
      4
      5
      6
      7
      // 1.js
      function test(){
          console.log('test');
      }

      // 2.js
      test();

      假如在 index.html 中只引用了 2.js ，会产生无法找到 test函数 的报错；

      假如在 index.html 中先引用 2.js 再引用 1.js ，仍然会产生报错，引用顺序问题。

      在项目庞大的情况下，这些引用管理是十分复杂的，但是如果使用了 Webpack 来进行模块化，就不会产生这样的问题，因为Webpack会将其自动组合成一个代码块。

    2）资源打包：Webpack 可以将项目中的各种资源（例如 JavaScript、CSS、图像等）视为模块，并将它们打包成一个或多个最终的静态资源文件。这样可以减少网络请求的次数，提高应用程序的加载性能。

    3）代码分割：Webpack 支持将应用程序的代码分割成多个块（chunks），并在需要时按需加载。这种代码分割的技术可以提高应用程序的初始加载速度，并减小用户需要下载的初始文件大小。

    4）资源优化：Webpack 提供了丰富的插件和工具生态系统，可以进行各种资源优化和转换，例如压缩代码、处理样式预处理器、优化图像等。这些优化可以减小资源文件的大小，提高应用程序的性能。

    5）开发环境支持：Webpack 提供了强大的开发环境支持，包括开发服务器、热模块替换（Hot Module Replacement）、源代码映射等功能。这些功能可以提升开发效率，加快开发周期。

Webpack 的使用

具体使用方式参考：一文看懂webpack打包操作

WebPack 安全

源码泄露

NodeJS 作为服务端使用的语言，不会在前端显示源码。但是不恰当的模式设置会导致源码泄露。

Webpack 提供两种模式：

  • development（开发模式）：打包后的代码会附带 .map 文件，攻击者可以通过浏览器开发者工具或 source-map 工具轻松恢复源码。
  • production（生产模式）：Webpack 会对代码进行压缩、重命名变量、删除注释等优化，使代码难以阅读，同时并不会生成 .map 文件

PacketFuzzer

打包器会将整站的API和API参数打包在一起供Web集中调用，这也便于我们快速发现网站的功能和API清单，但往往这些打包器所生成的JS文件数量异常之多并且总JS代码量异常庞大（多达上万行），这给我们的手工测试带来了极大的不便，Packer Fuzzer软件应运而生。

本工具支持自动模糊提取对应目标站点的API以及API对应的参数内容，并支持对：未授权访问、敏感信息泄露、CORS、SQL注入、水平越权、弱口令、任意文件上传七大漏洞进行模糊高效的快速检测。在扫描结束之后，本工具还支持自动生成扫描报告，您可以选择便于分析的HTML版本以及较为正规的doc、pdf、txt版本。