基于webpack的场景解决

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

场景描述

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

    • 效果如下图。
  • 现在需要删除该webpack文件夹。

技术背景

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

方案解决

  • 配置webpack的devtool字段,根据生产环境和开发环境。
    • 下述为vue.config.js中配置
javascript 复制代码
  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'
    }
  },

参考资料

相关推荐
云枫晖4 分钟前
Webpack系列-编译过程
前端·webpack
AskHarries14 分钟前
Toolhub — 一个干净实用的在线工具集合
前端·后端
H尗29 分钟前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js
昔人'37 分钟前
html`contenteditable`
前端·html
爱宇阳42 分钟前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
@大迁世界1 小时前
2025 年该选谁?npm vs yarn vs pnpm
前端·npm·node.js
crary,记忆1 小时前
简介NPM 和 NPX
前端·学习·npm·node.js
wocwin1 小时前
解决qiankun微前端Vue2+Element-ui主应用跳转到Vue3+Element-plus子应用样式冲突问题
vue.js
JianZhen✓1 小时前
现在在本地开发了一些代码A,又有了新需求要紧急开发代码B需要只上线代码B的代码,如何更好的处理这种情况
前端
郝学胜-神的一滴1 小时前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染