Generate sourcemaps only for some chunks

Question

I'm building my app using webpack. I generate 3 bundles: app.js, vendor.js and manifest.js. Since I have added UglifyJsPlugin to my conf, 3 sourcemaps are also generated.

I'd like to only generate a sourcemap for my app.js bundle, since the others 2 are useless to me. Is there a way to tell the uglifier to only generate a sourcemap for the chunks I want, instead of all ?

Here's what I currnetly have:

                               Asset       Size  Chunks                    Chunk Names
         app.1e1d20f5f417ed9df40d.js     901 kB    1, 2  [emitted]  [big]  app
     app.1e1d20f5f417ed9df40d.js.map    4.24 MB    1, 2  [emitted]         app
    manifest.05867db2f94981c04486.js    1.43 kB       2  [emitted]         manifest
manifest.05867db2f94981c04486.js.map    14.1 kB       2  [emitted]         manifest
     styles.1e1d20f5f417ed9df40d.css    42.3 kB    1, 2  [emitted]         app
 styles.1e1d20f5f417ed9df40d.css.map  108 bytes    1, 2  [emitted]         app
      vendor.2734c5cd65804c943c80.js    1.64 MB    0, 2  [emitted]  [big]  vendor
  vendor.2734c5cd65804c943c80.js.map    11.9 MB    0, 2  [emitted]         vendor

and here's what I'd like to have:

                               Asset       Size  Chunks                    Chunk Names
         app.1e1d20f5f417ed9df40d.js     901 kB    1, 2  [emitted]  [big]  app
     app.1e1d20f5f417ed9df40d.js.map    4.24 MB    1, 2  [emitted]         app
    manifest.05867db2f94981c04486.js    1.43 kB       2  [emitted]         manifest
     styles.1e1d20f5f417ed9df40d.css    42.3 kB    1, 2  [emitted]         app
 styles.1e1d20f5f417ed9df40d.css.map  108 bytes    1, 2  [emitted]         app
      vendor.2734c5cd65804c943c80.js    1.64 MB    0, 2  [emitted]  [big]  vendor

Here's my entire conf file, if needed:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
// var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'hidden-source-map',

  entry: {
    app: './src/scripts/app',
  },

  module: {
    rules: [
      {
        enforce: 'pre',
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          failOnWarning: false,
          failOnError: true,
        },
        test: /\.jsx?$/,
      },
      {
        exclude: /node_modules/,
        use: ['babel-loader'],
        test: /\.jsx?$/,
      },
      {
        exclude: /node_modules/,
        use: [
          'babel-loader',
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader',
          ],
        }),
        test: /\.scss$/,
      },
    ],
  },

  output: {
    filename: '[name].[chunkhash].js',
    path: path.join(__dirname, '/dist'),
  },

  plugins: [
    new ExtractTextPlugin('styles.[chunkhash].css'),

    // new HtmlWebpackPlugin({
    //   // favicon: paths.appFavicon,
    //   inject: 'body',
    //   minify: {
    //     collapseBooleanAttributes: true,
    //     collapseWhitespace: true,
    //     keepClosingSlash: true,
    //     removeComments: true,
    //     removeRedundantAttributes: true,
    //     removeScriptTypeAttributes: true,
    //     removeStyleLinkTypeAttributes: true,
    //     useShortDoctype: true,
    //   },
    //   showErrors: false,
    //   template: path.join(__dirname, '/src/index.html'),
    // }),

    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      },
      'ROLLBAR_ACCESS_TOKEN': JSON.stringify('e39dde52172a4b45a7d6039e5aa369eb'),
    }),

    new webpack.HashedModuleIdsPlugin(),

    new webpack.optimize.AggressiveMergingPlugin(),

    new webpack.optimize.OccurrenceOrderPlugin(true),

    // this is only be useful to extract common modules from multiple chunks
    // new webpack.optimize.CommonsChunkPlugin({
    //   minChunks: function (module, count) {
    //     return module.resource
    //       && module.resource.indexOf('node_modules') === -1
    //       && module.resource.match(/\.jsx?$/)
    //       && count > 2;
    //   },
    //   name: 'common',
    // }),

    new webpack.optimize.CommonsChunkPlugin({
      minChunks: function (module) {
        return module.resource
          && module.resource.indexOf('node_modules') !== -1;
      },
      name: 'vendor',
    }),

    new webpack.optimize.CommonsChunkPlugin({
      chunks: ['vendor'],
      name: 'manifest',
    }),

    new webpack.LoaderOptionsPlugin({
      debug: false,
      minimize: true,
    }),

    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      comments: false,
      compress: {
        screw_ie8: true,
        warnings: false,
      },
      mangle: {
        keep_fnames: true,
        screw_ie8: true,
      },
      sourceMap: true,
    }),

    new webpack.ProvidePlugin({
      $: 'jquery',
      'window.jQuery': 'jquery',
      Immutable: 'immutable',
      Fluxxor: 'fluxxor',
      jQuery: 'jquery',
      moment: 'moment',
      React: 'react',
      ReactDom: 'react-dom',
    }),
  ],

  resolve: {
    alias: {
      '~': path.join(__dirname, '/src/scripts'),
      '@': path.join(__dirname, '/src/stylesheets'),
    },
    extensions: [
      '.js',
      '.js.jsx',
      '.jsx',
      '.react.js.jsx',
    ],
  },
};

Thanks

Natala

Answer 1

Use the SourceMapDevToolPlugin instead of devtool and you will be able to exclude files like:

new webpack.SourceMapDevToolPlugin({
    filename: "sourcemaps/[file].map",
    test: /\.(js|jsx|css)($|\?)/i,
    exclude: /vendor\..+\.js/
})

Kidwell