How to display sourceMap with vue-cli and webpack

I’ve started working with vue and vue-cli recently and is going good. Here I have a quick tip that help you to display your sourceMaps:

First, go to your config.js file and add your sourceMap variable under dev object, so it will look something like this:

        
        
          
            
          
          
            
          
        

        // see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {

  # ...

  dev: {
    port: 8080,
    proxyTable: {},
    sourceMap: true # This is what you'll add
  }
}

      

Then add your option under webpack.dev.conf.js:

        
        
          
            
          
          
            
          
        

        var config = require('../config') # Add your config file
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')

# ...

module.exports = merge(baseWebpackConfig, {
  module: {
    loaders: utils.styleLoaders({
      sourceMap: config.dev.sourceMap # Add this to your util.styleLoaders
    })
  }
  
 # ...

})