webpackvue.jsproductionwebpack-production

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


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.


Solution

  • 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',
    
        (...)
      }
    }