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

Question

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

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?

Thank you.

Damper

Why whould you want to do that? – Appearance

I don't think anyone should have the possitbility to see the components, etc. – Damper

How are you generating the bundle (the app you deployed)? – Appearance

The command is: npm run build – Damper

Answer 1

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

For the webpack template, you should look for the config/index.js file,

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',

    (...)
  }
}

Underneath

Answer 2

if you are using vue-cli and have a vue.config.js file then you can simply just add it like this

module.exports = {
    productionSourceMap: false,
}

Shiller

Lifesaver! 8> Should be as accepted one! – Partain