webpack v5 SourceMapDevToolPlugin "exclude" option not working

Question

After upgarding to webpack 5, vendor.js file couldn't be excluded from being source-mapped via SourceMapDevToolPlugin.

// webpack.config.ts - removed other config for brevity
import { Configuration } from 'webpack-dev-server';

export default (env) => {
  const config: Configuration = {};
  config.mode = 'production';
  config.entry = './entry.app.js';

  config.output = {
    path: path.join(__dirname, '/public'),
    pathinfo: true,
    filename: '[name].[fullhash].js',
    chunkFilename: '[name].[fullhash].js',
  };

  config.devtool = 'source-map';
  config.bail = true;
  config.plugins = [
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map',
      exclude: ['vendor.js'],
    }),
  ];

  config.optimization = {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: false,
        sourceMap: false,
      }),
      new CssMinimizerPlugin(),
    ],
    moduleIds: 'deterministic',

    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 100,
      minSize: 0,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          test: /([/\\]node_modules[/\\]|[/\\]dev[/\\]vendor[/\\])/,
          chunks: 'all',
        },
      },
    },
  };

 return config;
}

// entry.app.js - removed some lines for brevity

import './horrible-asset-loader';
import './setup-for-angular';
import { runApp } from './assets/js/app';
runApp();

// horrible-asset-loader.js
// contains a lot of require statements of npm packages saved into our repository under a vendor folder. crazy i know but I don't know why this was done.

require('ng-bs-daterangepicker/dist/ng-bs-daterangepicker.min.js'); // throwing an error when building because webpack is trying to create a source map for it

// Temporary solution to bundle multiple javascript files into one. This will be replaced by ES6 import.

SourceMapDevToolPlugin exclude config i've tried so far:

// from https://webpack.js.org/plugins/source-map-dev-tool-plugin/#exclude-vendor-maps
exclude: ['vendor.js'] 

//from https://github.com/webpack/webpack/issues/2431
exclude: /vendor.*.*/
exclude: 'vendor'

// just me desperately trying every possible config
exclude: ['vendor']
exclude: /vendor\.[0-9a-zA-Z]\.js/
exclude: 'vendor.js'
exclude: ['vendor.[chunkhash].js']
exclude: ['vendor.[fullhash].js']

The github issue link mentioned about an issue with UglifyJsPlugin but we aren't using that so I ruled it out.

Although if i set config.devtool to false, the SourceDevToolPlugin config works.

Is there something wrong with my config?

UPDATE: I think i got it now. Looks like i just really have to set devtool to false based on this example: https://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case

I just thought devtool should only be set to false for development mode because of this note:

If you want to use a custom configuration for this plugin in development mode, make sure to disable the default one. I.e. set devtool: false.

Am I right?

UPDATE 1: Yup! looks like I'm right. I should've read the other comments on the github issue: https://github.com/webpack/webpack/issues/2431#issuecomment-245547872 Sorry for wasting anyone's time.

Answer 1

This was a really silly mistake. I misunderstood the docs for the plugin: https://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case

Setting devtool to false fixed the issue.