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

Question

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

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

谢谢。

Answer 1

那是因为 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',

    (...)
  }
}

Answer 2

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

module.exports = {
    productionSourceMap: false,
}

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

How to remove webpack:// from sources in the browser

production

webpack

vue.js

webpack-production