React Webpack CompressionPlugin gzip Проблема с динамической загрузкой страницы

Question

Я использую веб-пакет 3.10.0 с CompressionPlugin 1.1.11 для реакции. Это все работает и сжимает разделенные файлы чанка.

Это файлы *.js, разделенные генерацией для всех частей маршрутизатора приложения, через чанки веб-пакетов, такие как (реагируйте на route.js):

import React from 'react';
import {Route, IndexRoute} from 'react-router';
import App from './containers/App';


function errorLoading(error) {
    throw new Error(`Dynamic page loading failed: ${error}`);
}

function loadRoute(cb) {
    return module => cb(null, module.default);
}

export default {
    path: '/',
    component: App,
    indexRoute:
    {
        getComponent(location, cb) {
            System.import(/* webpackChunkName: "dashboard" */ './components/dashboard/Dashboard')
                .then(loadRoute(cb))
                .catch(errorLoading);
        },
    },
    childRoutes: [
        {
            path: 'dashboard',
            getComponent(location, cb) {
                System.import(/* webpackChunkName: "dashboard" */ './components/realestate/RealEstate')
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }
        },
        {
            path: 'routeritem1',
            getComponent(location, cb) {
                System.import(/* webpackChunkName: "routeritem1" */ './components/routeritem1')
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }
        },
        {
            path: 'routeritem2',
            getComponent(location, cb) {
                System.import(/* webpackChunkName: "routeritem2" */ './components/routeritem2')
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }
        },

        {
            path: 'routeritem3',
            getComponent(location, cb) {
                System.import(/* webpackChunkName: "routeritem3" */ './components/routeritem3')
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }
        },

        {
            path: 'routeritem4',
            getComponent(location, cb) {
                System.import(/* webpackChunkName: "routeritem4" */ './components/routeritem4')
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }
        },

        {
            path: 'routeritem5',
            getComponent(location, cb) {
                System.import(/* webpackChunkName: "routeritem5" */ './components/routeritem5')
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }
        },
    ],
};

С помощью ChangeExtensionPlugin он добавляет основные сжатые файлы javascript в конец тега index.html.

<script type="text/javascript" src="vendor-1.1.0.js.gz"></script><script type="text/javascript" src="main_-1.1.0.js.gz"></script>

Все идет нормально. Есть еще 10 файлов.js.gz, которые загружаются по команде, когда вы просматриваете через реагирующий маршрутизатор.

Проблема в том, что эти файлы заканчиваются на.js.gz, а не на js. Когда я просматриваю часть маршрутизатора, браузер выдает: Ошибка: сбой при динамической загрузке страницы: Ошибка: сбой при загрузке фрагмента 0.

Внутри vendor.js:

/******/script.src = __webpack_require__.p + "" + ({"0":"dashboard","1":"routeritem1","2":"routeritem2","3":"routeritem3","4":"routeritem4","5":"routeritem5"}[chunkId]||chunkId) + "_-1.1.0.js";

изменение " -1.1.0.js"; на " -1.1.0.js.gz"; решает проблему, но я хочу, чтобы она была полностью автоматизирована.

В веб-пакете в файле: JsonpMainTemplatePlugin.js, рядом: const scriptSrcPath = this.applyPluginsWaterfall эта часть генерируется. Я не хочу менять сам код веб-пакета.

Любая идея, как это может быть автоматизировано (например, плагин, изменения webpack.config.js, что-то еще), чтобы изменить эту часть генерации кода веб-пакета?

Соответствующий webpack.config.js

    plugins: [      
  new webpack.optimize.ModuleConcatenationPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor' + outputFileTemplateSuffix + '.js',
      minChunks: Infinity
  }),
  new webpack.DefinePlugin({
      "process.env": { NODE_ENV: JSON.stringify("production")}
  }),
  new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
       "window.jQuery": "jquery"
  }),
  new HtmlWebpackPlugin({
    template: path.join(__dirname, 'index.html'),
    filename: 'index.html',
    minify: {
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true,
            removeComments: true,
            removeRedundantAttributes: true
        }
  }),
  new UglifyJsPlugin({
    parallel: true,
    uglifyOptions: {
    ecma: 5, // specify one of: 5, 6, 7 or 8
    keep_classnames: false,
    keep_fnames: false,
    ie8: false,
    nameCache: null, // or specify a name cache object
    safari10: false,
    toplevel: false,
    warnings: false,
    }
  }),
  new CompressionPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$/,
    threshold: 10240,
    minRatio: 0.8,
    deleteOriginalAssets: true
   }),
   new ChangeExtensionPlugin(
   {
    extensions: ['js'],
    compressionMethod: 'gz',
   }),
   new CopyWebpackPlugin([
    {
        from: path.join(__dirname, 'app/img'),
        to: 'img'
    }
  ])
],