如何在客户端上摆脱webpack源代码？

Question

我在pm2服务器上部署了一个node.js应用程序，使用Nginx提供客户端代码。我的客户端源代码已经由Webpack打包，预期会被压缩和混淆。但是当我在客户端运行我的应用程序并打开控制台日志的“source”选项卡时，我可以看到混淆后的源代码和位于“top://Webpack”目录下的Webpack文件结构。

我不想向客户端显示我的代码结构。如何在浏览器中去除Webpack文件结构？

- newguy

Answer 1

这个原始文件结构是由sourcemaps提供的。这很棒，因为它允许你追溯生产代码中的错误。

你在这里有以下选项:

• 通过设置devtool: false来禁用sourcemaps生成。文档.
• 通过删除或配置nginx不提供这些文件来不提供*.map文件。

你可以阅读一个关于为什么这不是一个好主意的讨论这里。

- Yury Tarabanko

---

谢谢。我正在使用选项eval-source-map，并且我看到文档上说production: no。这是什么意思？如果我想保留一些跟踪但不想显示代码结构，您建议使用哪个选项？或者是否最好使用devtool: false使其对用户完全不透明？客户端没有太多事情要做。一切都在服务器上运行。客户端接收的唯一命令是一些mousemove和mousedown事件。 - newguy

@newguy 我相信 production: no 的意思是它不适合用于生产环境。"我想保留一些记录，但不想显示代码结构"，我会配置Web服务器，除非请求中指定了某个头部，否则不提供 *.map 文件的服务。虽然我不明白你为什么要隐藏你的代码 :) - Yury Tarabanko

谢谢，我已经将 devtool:eval-source-map 改为了 devtool:false，这样 webpack 的样式源代码就消失了。但是，即使 Chrome 控制台告诉我它检测到名为 blob.js.map 的源映射文件，我也找不到任何 *.map 文件在我的 HTML 文件夹中。如果我甚至看不到它，我就无法隐藏它。是的，隐藏我的代码是我项目的特殊要求。这是一个浏览器游戏，所以我宁愿让黑客远离我，而不是给自己带来更多麻烦。 - newguy

@newguy "eval-source-map" 将源映射内联到输出中。 - Yury Tarabanko

我知道，但我已将其更改为devtool:false并尝试了devtool:nosources-source-map。但是当我单击我的应用程序入口点main.js文件时，Chrome仍然告诉我它检测到了sourcemap。 - newguy

@newguy 很难在没有看到你的实际代码的情况下说。不知道清除浏览器缓存，重新启动nginx... - Yury Tarabanko