Как создать читаемую трассировку стека в производственной сборке Webpack из исходных карт и минимизированных пакетов? Включены ли исходные карты в пакеты с разделением кода?

Question

Привет, я изучаю React в среде Typescript с помощью Webpack и пытаюсь отобразить трассировку стека ошибок в рабочей среде.

Я включил sourceMaps в tsconfig.json и имею dev-tools: source-map настройка в моей рабочей веб-конфигурации. Я выполняю минификацию с помощью плагина Terser с включенными исходными картами следующим образом:

optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
....

Я вижу, что URL-адрес исходной карты включен в качестве комментария в конце минимизированного файла пакета, например,

//# sourceMappingURL=course-list.6ccadc639a7a607e7b4e.bundle.js.map%  

Я также вижу, что минимизированные файлы map создаются в папке dist , как и ожидалось. Однако, когда я отображаю трассировку стека и сообщение об ошибке для брошенной Error , это сообщение невозможно прочитать с помощью минимизированного содержимого.

http://localhost:8080/vendors~course-list.3042c44300bc08021f63.bundle.js:2:6029
http://localhost:8080/vendors~course-list.3042c44300bc08021f63.bundle.js:2:5067

in w in b in withRouter(b) in e in e in Suspense in div in e in e in S

Как отобразить читаемую трассировку стека для пользователей в производственной средеокружения?

Дополнительная информация 1 Я проверяю, что ошибка сетевого подключения (в производственной среде) генерируется библиотекой axios при попытке подключения к локальному отдыхуКонечная точка API. Если я запускаю в среде разработки, я могу видеть дополнительные детали в трассировке стека, относящиеся к сбою сетевого подключенияДетали разрозненны и искажены в производственной среде с минимизированным пакетом и опцией devtool, установленным на source-map.

Отчет пакета, сгенерированный из производственной сборки, выглядит следующим образом:

Дополнительная информация 2 Я использовал разбиение кода на уровне маршрута для создания некоторых пакетов. Запуск source-map-explorer для расщепленного пакета кода маршрута, который выдает ошибку:

npx source-map-explorer dist/vendors~course-list.3042c44300bc08021f63.bundle.js

приводит к сообщению об ошибке:

dist/vendors~course-list.3042c44300bc08021f63.bundle.js
  Unable to map 265/14948 bytes (1.77%)

Это комплекткоторая содержит библиотеку axios для выполнения запроса REST API. Отчет об анализе исходной карты для пакета показан на рисунке ниже:

Моя производственная конфигурация веб-пакета выглядит следующим образом:

module.exports = merge(config.CommonConfig, {
  devtool: 'source-map',
  mode: 'production', // https://webpack.js.org/configuration/mode/#mode-production
  module: {
    rules: [
      {
        // link css modules
        test: /\.css$/,
        include: path.resolve(constants.dir.SRC, 'app'),
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: require.resolve('css-loader'),
            options: {
              modules: {
                localIdentName: '[hash:base64]',
              },
              importLoaders: 1,
              sourceMap: true,
            },
          },
        ],
      },
      {
        // link global css module in styles
        test: /\.css$/,
        include: path.resolve(constants.dir.SRC, 'styles'),
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: require.resolve('css-loader'),
            options: { sourceMap: true },
          },
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        terserOptions: {
          output: {
            comments: false,
          },
          extractComments: false,
        },
      }),
      new OptimizeCSSAssetsPlugin(),
    ],
  },
  plugins: [
    // inject react and react-dom CDN to scripts in index.html
    new WebpackCdnPlugin({
      modules: {
        react: [
          { name: 'react', version: 16, path: 'umd/react.production.min.js' },
          {
            name: 'react-dom',
            version: 16,
            path: 'umd/react-dom.production.min.js',
          },
        ],
      },
      prod: true,
    }),

    // extract css to file, minimize in optimization
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false,
    }),

    // use brotli compression to compress resources larger than ~10K
    new CompressionPlugin({
      filename: '[path].br[query]',
      algorithm: 'brotliCompress',
      test: /\.(css|gif|html|jpg|jpeg|js|png|svg|)$/,
      compressionOptions: { level: 11 },
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false,
    }),

    // use gzip compression to compress resources larger than ~10K
    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(css|gif|html|jpg|jpeg|js|png|svg|)$/,
      compressionOptions: { level: 9 },
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false,
    }),
  ],
  externals: [
    // add libraries to be excluded from bundle add here
    // for example loaded from CDN
    { react: 'React' },
    { 'react-dom': 'ReactDOM' },
  ],
});