настроить SourceMapDevToolPlugin для создания исходной карты

TL;DR

Какие параметры конфигурации мне нужно установить в SourceMapDevToolPlugin для эмуляции devtool: 'source-map'?

Я должен использовать SourceMapDevToolPlugin, чтобы избежать создания исходной карты для моих модулей поставщика .... но мне нужны карты стилей source-map, а не inline-source-map.

Подробности:

Я использую webpack 4 и не хочу тратить время на создание vendor.js.map, поэтому я не могу просто установить devtool и вместо этого делаю следующее:

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

но я заметил этот комментарий:

Вы можете использовать следующий код, чтобы заменить параметр конфигурации devtool: inline-source-map на эквивалентную настраиваемую конфигурацию плагина:

Я, хоть убей, не могу понять, какие параметры мне нужно передать плагину для репликации devtool: 'source-map' вместо inline-source-map

мой package.json:

"scripts": {
   "build": "webpack -p --config webpack.prod.js",
   "start": "webpack-dev-server --debug --bail --config webpack.dev.js"
},

моя (релевантная) конфигурация веб-пакета:

module.exports = {
   devtool: false, // using SourceMapDevToolPlugin instead
   optimization: {
     splitChunks: {
       cacheGroups: {
         commons: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all'
         },
         styles: {
           test: /\.css$/,
           name: 'styles',
           chunks: 'all'
         }
      }
   },
   plugins: [
     new webpack.SourceMapDevToolPlugin({
       filename: '[name].map',
       exclude: ['vendor.js']
     })
   ]
}

и моя конфигурация разработчика:

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: './public',
    stats: 'minimal'
  }
});

и моя конфигурация продукта

module.exports = merge(common, {
  mode: 'production',
  stats: 'errors-only'
});

javascript webpack-4
person Jason    schedule 07.09.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Я столкнулся с тем же вопросом, пытаясь исключить часть кода из исходной карты. Поскольку я не мог получить удовлетворительные ответы в Интернете, я просмотрел исходные коды Webpack и нашел следующий код, используемый Webpack

https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js

if (
            options.devtool &&
            (options.devtool.includes("sourcemap") ||
                options.devtool.includes("source-map"))
        ) {
            const hidden = options.devtool.includes("hidden");
            const inline = options.devtool.includes("inline");
            const evalWrapped = options.devtool.includes("eval");
            const cheap = options.devtool.includes("cheap");
            const moduleMaps = options.devtool.includes("module");
            noSources = options.devtool.includes("nosources");
            legacy = options.devtool.includes("@");
            modern = options.devtool.includes("#");
            comment =
                legacy && modern
                    ? "\n/*\n//@ source" +
                      "MappingURL=[url]\n//# source" +
                      "MappingURL=[url]\n*/"
                    : legacy
                    ? "\n/*\n//@ source" + "MappingURL=[url]\n*/"
                    : modern
                    ? "\n//# source" + "MappingURL=[url]"
                    : null;
            const Plugin = evalWrapped
                ? EvalSourceMapDevToolPlugin
                : SourceMapDevToolPlugin;
            new Plugin({
                filename: inline ? null : options.output.sourceMapFilename,
                moduleFilenameTemplate: options.output.devtoolModuleFilenameTemplate,
                fallbackModuleFilenameTemplate:
                    options.output.devtoolFallbackModuleFilenameTemplate,
                append: hidden ? false : comment,
                module: moduleMaps ? true : cheap ? false : true,
                columns: cheap ? false : true,
                lineToLine: options.output.devtoolLineToLine,
                noSources: noSources,
                namespace: options.output.devtoolNamespace
            }).apply(compiler);
        }

Итак, вы можете видеть, что параметры SourceMapDevToolPlugin могут зависеть от некоторых конфигураций вашего выходного веб-пакета (sourceMapFilename, devtoolModuleFilenameTemplate, devtoolFallbackModuleFilenameTemplate, devtoolLineToLine, devtoolNamespace - см. ).

Для моей конфигурации веб-пакета последние параметры, которые входили в SourceMapDevToolPlugin, когда я использовал devtool: 'source-map', были следующими:

{
    "filename": "[file].map[query]",
    "append": null,
    "module": true,
    "columns": true,
    "lineToLine": false,
    "noSources": false,
    "namespace": ""
}

Если вы не используете ни один из упомянутых вариантов вывода, то вам должно подойти все вышеперечисленное. В противном случае вам нужно будет принять их во внимание. Вы можете изменить node_modules / webpack / lib / WebpackOptionsApply.js, чтобы добавить console.log с JSON.stringify (), чтобы увидеть, какие точные параметры использовались для вашей конфигурации Webpack.

Надеюсь это поможет.

person Afzal    schedule 21.03.2019
comment
Вы можете изменить node_modules / webpack / lib / WebpackOptionsApply.js, чтобы добавить console.log с помощью JSON.stringify () - гладко - person Jason; 27.03.2019

arrow_upward
1
arrow_downward

Из документов, акцент мой:

filename (string): определяет имя выходного файла SourceMap (будет встроенным, если значение не указано).

это означает, что если вы укажете опцию filename, вы будете вести себя так же, как devtool: 'source-map'

devtool: 'inline-source-map' === new webpack.SourceMapDevToolPlugin({})

devtool: 'source-map' === new webpack.SourceMapDevToolPlugin({ filename: '[file].map' })

person Dave    schedule 08.03.2019