如何移除浏览器Sources面板中的webpack://来源？

Is it normal to see full code via webpack:// in Chrome DevTools? #

Short answer: It depends on your environment!

• Development mode: Totally normal. Webpack generates source maps by default here to make debugging way easier—this lets you see your original component code instead of minified/bundled junk when you inspect elements or debug errors.
• Production mode: Not normal, and actually a bit of a problem. If your deployed app still shows full source code via webpack://, that means source maps are enabled in your production build. This exposes your raw code to anyone who knows how to check DevTools, which could pose security risks and also adds unnecessary file size to your bundle.

Can you remove this content? Absolutely! #

Here’s how to fix it based on your setup:

If you’re using the classic Vue webpack template (with separate config files)

1. Open your production webpack config file, usually named webpack.prod.conf.js.
2. Look for the devtool property. It might be set to something like source-map or cheap-module-source-map.
3. Change it to false or none to disable source map generation entirely:

   module.exports = {
     // ... other configs
     devtool: false,
     // ...
   }
   

If you’re using Vue CLI 3+ (modern setup with vue.config.js)

Add this line to your vue.config.js file to disable production source maps:

module.exports = {
  productionSourceMap: false
}

Bonus: Keep debugging without exposing code

If you still want to debug production errors (for your own use) but don’t want to show source code to users, use the hidden-source-map option instead. This generates source maps but doesn’t include references to them in your bundled code. You can then upload these maps to error tracking tools to get meaningful stack traces without exposing your code publicly.

After making these changes, re-build your app and redeploy. The webpack:// entries in Chrome DevTools should be gone!

内容的提问来源于stack exchange，提问作者Bertie92