如何从浏览器的源中删除 webpack://

【问题标题】：How to remove webpack:// from sources in the browser如何从浏览器的源中删除 webpack://
【发布时间】：2018-08-12 06:45:23
【问题描述】：

我正在为 Vue.JS 网站使用 this webpack 模板。

我部署了应用程序，它运行良好，但如果你在 Chrome 中转到开发者工具 > 源代码，然后在 webpack:// 下你可以看到组件和整个代码。有没有办法摆脱它？或者如果您使用 webpack，这是否很常见？

谢谢。

【问题讨论】：

你为什么要这样做？
我认为任何人都不应该有机会看到组件等。
您是如何生成捆绑包（您部署的应用程序）的？
命令是：npm run build

标签： webpack vue.js production webpack-production

【解决方案1】：

如果你使用 vue-cli 并且有一个 vue.config,js 文件，那么你可以像这样简单地添加它

module.exports = {
    productionSourceMap: false,
}

【讨论】：

【解决方案2】：

那是因为 webpack 生成了source maps，它显示了原始源代码和结构。

对于 webpack 模板，您正在寻找 config/index.js 文件，

并且为了跳过源映射生成将productionSourceMap更改为false：

module.exports = {
  dev: {
    (...)
  },

  build: {

    (...)

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    (...)
  }
}

【讨论】：