为什么某些用 vue.js 创建的 web 应用，直接用 chrome 的检查工具就能直接看到项目源码？

[watanuki]

楼主是个业余的，因为一般见到的都是打包成一个 bundle.js ，像图中这种情况的，还是第一次见，这让我产生了两个疑问：

1. 这是怎么实现的，是对应 webpack 中的某些配置吗?
2. 为什么要特意这样做？这不是把项目源码的大部分都暴露出来了吗？

[yhxx]

我也见过这种操作，负责的人不知道怎么部署
服务器上跑 npm run dev，然后用 nginx 反代

[DOLLOR]

@autoxbc
源代码文件不光有代码，还有注释，而且注释常常会暴露很多机密或隐私。就像上次的“穷 B vip”事件，忘记混淆代码，注释、变量名的信息被好事者扒了出来。
自那以后我就要求所有前端代码必须混淆了。

[cuzfinal]

这服务器跑的是开发模式，webpack 协议还连着呢

[Mutoo]

有些小开发商为了方便线上 debug 会在 production build 的时候启用 sourcemap
https://webpack.js.org/configuration/devtool/#root

方便调试的同时暴露源码。不过对其它前端来说可是大好消息，可以下载下来学习、分析。
为些我还写了一个 sourcemap 解压工具
https://github.com/mutoo/webpack-sourcemap-unpacker

[pcwow]

开了 Sourcemap

https://play.dlsite.com/dist/js/play.bundle.js

https://play.dlsite.com/dist/js/play.bundle.js.map

[DOLLOR]

那个并不是“webpack 协议”，而是利用“sourceURL”指令修改了源代码在浏览器在开发者工具的映射位置。
你可以试着在浏览器控制台粘贴以下代码和注释
```
console.log('see sources tab')
//@ sourceURL=myprotocol:///my.domain.com/myfile.js
```
然后你会在源代码标签里发现这段代码被神奇地映射在 URL“myprotocol:///my.domain.com/myfile.js”文件里。
这里的地址，你可以任意改的，不受跨域之类的限制，只要符合规则。

[dcatfly]

最大的可能是用了脚手架工具 但是忘了删除 sourcemap

[ibegyourpardon]

@yhxx 会反代不会打包部署。。。

我是不太明白这脑回路。。。

[wo152]

要么是为了赶上线，要么是代码技术问题，要么其实也不算什么秘密了。。。。我司是只要没什么秘密的东西放前端不混淆也是可以的。

[cweijan]

dev-server 只是一个 http-server, 起作用的是 source map, 用一个 source map 的 js 举例
http://localhost:3000/app.js, 那么该 js 最下方会有一条这样的注释
//# sourceMappingURL=app.js.map 浏览器则会去加载他的 map
http://localhost:3000/app.js.map
文件内容如下
{
"version": 3,
"file": "app.js",
"sources": [
"webpack:///webpack/bootstrap",
"webpack:///./node_modules/@babel/runtime-corejs2/core-js/array/from.js",
"webpack:///./node_modules/@babel/runtime-corejs2/core-js/array/is-array.js",
"webpack:///./node_modules/@babel/runtime-corejs2/core-js/get-iterator.js",
"webpack:///./node_modules/@babel/runtime-corejs2/core-js/is-iterable.js"
],
"sourcesContent": [],
"sourcesRoot": ""
}

前端代码即使进行了混淆压缩, 但 source map 没有关闭, 仍然会在浏览器进行加载

[lq0128]

项目在 build 时,webpack 中会有一个叫 productionSourceMap 的配置属性,设置成 fasle,项目在打包后就看不到源码目录结构