webpack v5 SourceMapDevToolPlugin опция "exclude" не работает
После обновления до webpack 5 файл vendor.js не мог быть исключен из сопоставления источника через 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 исключает конфигурацию, которую я пробовал до сих пор:
// 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']
В ссылке на проблему github упоминается проблема с UglifyJsPlugin, но мы ее не используем, поэтому я исключил ее.
Хотя если я установил
config.devtool
к
false
, то
SourceDevToolPlugin
конфиг работает.
Что-то не так с моей конфигурацией?
ОБНОВЛЕНИЕ: я думаю, что понял. Похоже, мне просто нужно установить devtool в false на основе этого примера: https://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case
я только подумал
devtool
должен быть установлен только на
false
для режима разработки из-за этого примечания:
Если вы хотите использовать настраиваемую конфигурацию для этого плагина в режиме разработки, обязательно отключите конфигурацию по умолчанию. Т.е. установить devtool: false.
Я прав?
ОБНОВЛЕНИЕ 1: Ага! похоже я прав. Я должен был прочитать другие комментарии по проблеме с github: https://github.com/webpack/webpack/issues/2431#issuecomment-245547872 Извините, что зря потратил время.
1 ответ
Это была действительно глупая ошибка. Я неправильно понял документацию для плагина:https://webpack.js.org/plugins/source-map-dev-tool-plugin/#basic-use-case
Настройка
devtool
на false исправлена проблема.