Webpack 2 sourcemaps not generating

Question

Webpack 2 source-map are not generating for javascript and css. It doesn't even show error. I used same syntax as the official documentation. I even added uglifyJs plugin sourcemap parameter to true. Can anybody please help me?

Below is my webpack config

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');

const extractSass = new ExtractTextPlugin({
  filename: "vendor-styles.css"
});

module.exports = {
  entry: './js/app/index.js',

  output: {
    path: path.resolve(__dirname, "./js/dist/"),
    filename: "[name].js"
  },

  devtool: "source-map",

  plugins: [
    extractSass,
    new webpack.ProvidePlugin({
      Promise: 'es6-promise-promise',
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),
    new webpack.optimize.UglifyJsPlugin({sourceMap: true})
  ],

  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",

        query: {
          presets: [
            'env',
            'react'
          ]
        }
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: true
            }
          }, {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }],
          // use style-loader in development
          fallback: "style-loader"
        })
      },
      {
        test: /\.css$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: true
            }
          }],
          // use style-loader in development
          fallback: "style-loader"
        })
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/octet-stream&name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: "file-loader?name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=image/svg+xml&name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: 'url-loader'
      },
    ]
  }
}

Answer 1

I was having the same problem that @pritesh-panjiker was having. What actually solved it for me was the simple addition of: {sourceMap: true} Into the the line of code:

new webpack.optimize.UglifyJsPlugin({sourceMap: true})

I also found these two documents very useful when I upgraded from Webpack 1 to Webpack 2: https://moduscreate.com/blog/webpack-2-tree-shaking-configuration/ https://gist.github.com/sokra/27b24881210b56bbaff7