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.
