基于webpack的场景解决

2025-09-10 188 阅读1分钟

场景-已部署的项目在源代码面板处有webpack文件夹

场景描述

一个老项目测试时发现存在Webpack代码泄漏的安全漏洞，访问已部署的网站，打开源代码面板，可以看到webpack文件夹，内部含有接口文档等敏感信息。
- 效果如下图。

现在需要删除该webpack文件夹。

技术背景

webpack
- 前端打包工具。
source-map
- 源码映射。
  - 记录了编译前后JavaScript代码之间的对应关系。
- 需求
  - 运行在浏览器的代码是经过打包压缩的，与开发环境代码有区别，比如ES6可能转换为ES5。
    - 调试转换后代码时比较困难，而source-map可以辅助调试，可以将转换后的代码映射到原始的源文件，使得可以在调试工具中看到原始代码。
- 使用
  - 可通过配置webpack的devtool选项控制source-map的生成。
devtool配置

方案解决

配置webpack的devtool字段，根据生产环境和开发环境。
- 下述为vue.config.js中配置

  configureWebpack: config => {
    config.resolve.extensions = ['.js', '.vue', '.json']
    if (process.env.NODE_ENV === 'production') {
      // 生产环境禁用source-map
      config.devtool = false
    } else {
      // 开发环境使用source-map（可选）
      config.devtool = 'source-map'
    }
  },

参考资料