Webpack2 not generating JS sourcemaps

Question

I can't seem to get Webpack2 to generate a JS sourcemap. I thought maybe removing the Closure Compiler plugin would fix it, but nope.

My setup:

• webpack 2.4.1
• webpack-closure-compiler 2.1.4

Command I'm running:

webpack -d --colors --progress

My webpack config:

const path = require('path')
const DefinePlugin = require('webpack').DefinePlugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ClosureCompilerPlugin = require('webpack-closure-compiler')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  devtool: 'source-map',
  entry: {
    'client-bundle': path.join(__dirname, 'src/index')
  },
  module: {
    rules: [
      {
        test: [ /\.jsx?$/ ],
        include: [/src/],
        loader: 'babel-loader',
        exclude: [/\.test.js$/]
      },
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.html?$/, loader: 'html-loader' },
      { test: /\.(css|sass)$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' }) },
      { test: /\.(png|jpg|jpeg|gif|ico)$/, loader: 'file-loader?name=[path][name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
    ]
  },
  output: {
    filename: '[name].js',
    library: '[name]',
    libraryTarget: 'this',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([
      {from: path.join(__dirname, 'src/index.html')}
    ]),
    new ClosureCompilerPlugin({
      compiler: {
        language_in: 'ECMASCRIPT6',
        language_out: 'ECMASCRIPT5',
        compilation_level: 'SIMPLE'
      },
      concurrency: 3
    }),
    new DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    })
  ],
  target: 'web'
}

I've tried every possible value for devtool indicated here: https://webpack.js.org/configuration/devtool/. I've tried adding create_source_map: true to the compiler object in the Closure Compiler config. Nothing seems to work. It's not a permissions issue, because the bundle is generated just fine.

EDIT:

So I changed the webpack command to use the -p option instead of -d. That produced an error:

ERROR in client.js from UglifyJs
TypeError: Cannot read property 'sections' of null

This is odd, since I'm not using the UglifyJS plugin. Odder yet, is that I could only get rid of the error by removing use of the Closure Compiler Plugin. Now things build correctly, and a source map is generated, but I have no compression.

Answer 1

It turned out to be a couple of problems with my Closure Compiler config (after I switched webpack to the -p command line option).

1. Since Babel was already transpiling, the language_in property needed to be set to ECMASCRIPT5 instead of ECMASCRIPT6.
2. I also needed to add create_source_map: true to the compiler object.

Here's my complete working webpack config (note: I changed the name of the bundle from "client-bundle" to "client"):

const path = require('path')
const DefinePlugin = require('webpack').DefinePlugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ClosureCompilerPlugin = require('webpack-closure-compiler')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  devtool: 'source-map',
  entry: {
    'client': path.join(__dirname, 'src/index')
  },
  module: {
    rules: [
      {
        test: [ /\.jsx?$/ ],
        include: [/src/],
        loader: 'babel-loader',
        exclude: [/\.test.js$/, /node_modules/]
      },
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.html?$/, loader: 'html-loader' },
      { test: /\.(css|sass)$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' }) },
      { test: /\.(png|jpg|jpeg|gif|ico)$/, loader: 'file-loader?name=[path][name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
    ]
  },
  output: {
    filename: '[name].js',
    library: '[name]',
    libraryTarget: 'this',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([
      {from: path.join(__dirname, 'src/index.html')}
    ]),
    new ClosureCompilerPlugin({
      compiler: {
        language_in: 'ECMASCRIPT5',
        language_out: 'ECMASCRIPT5',
        compilation_level: 'SIMPLE',
        create_source_map: true
      },
      concurrency: 3
    }),
    new DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    })
  ],
  target: 'node'
}