如何从浏览器中的源中删除 webpack:// [英] How to remove webpack:// from sources in the browser

问题描述

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

I am using this webpack template for a Vue.JS website.

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

I deployed the app and it works well, but if you go to developer tools > Sources in Chrome, then under webpack:// you can see the components and the whole code. Is there a way to get rid of that? Or is this usual if you use webpack?

谢谢.

推荐答案

那是因为 webpack 生成了 源映射，显示原始源代码和结构.

That's because webpack generates source maps which show the original source code and structure.

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

For the webpack template you are looking for the config/index.js file,

为了跳过源映射生成，将 productionSourceMap 更改为 false:

and in order to skip the source map generation change productionSourceMap to false:

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

  build: {

    (...)

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

    (...)
  }
}

这篇关于如何从浏览器中的源中删除 webpack://的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！