HtmlWebpackPlugin & CompressionPlugin нет.добавив gzip в пакет

Question

У меня есть приложение React, обслуживаемое через ExpressJS.Я настроил Webpack для создания .gz ресурсов.

Однако HtmlWebpackPlugin создает пакет в моем index.html как файл .js.

Я предполагаю, что это потому, что в outputprop в моем webpack.prod.js У меня есть имя файла с расширением .js.

Как я могу настроить это так, чтобы оно возвращало расширение .gz, когда оно поддерживается?

Express App

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.resolve(__dirname, '../dist')));

app.get('*.js', function(req, res, next) {
    req.url = req.url + '.gz';
    res.set('Content-Encoding', 'gzip');
    next();
});

app.get('/healthz', (req, res) => res.send('OK'));
app.get('*', (req, res) =>
    res.sendFile(path.resolve(__dirname, '../dist/index.html'))
);

const PORT = process.env.SERVER_PORT || 3000;
const HOST = process.env.SERVER_HOST || '127.0.0.1';

app.listen(PORT);
console.log(`API started on ${HOST}:${PORT}`);

webpack.common.js

const commonPaths = require('../common-paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    context: commonPaths.appPath,
    entry: './index.jsx',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            { test: /\.(jsx?)$/, exclude: /node_modules/, use: ['babel-loader'] }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    chunks: 'initial',
                    test: 'vendor',
                    name: 'vendor',
                    enforce: true
                }
            }
        }
    },
    plugins: [
        new CompressionPlugin({
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new HtmlWebpackPlugin({
            title: 'Web App',
            template: commonPaths.projectRoot + '/public/index.html',
            inject: 'body'
        })
    ]
};

webpack.prod.js

const commonPaths = require('../common-paths');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    mode: 'production',
    output: {
        filename: 'static/[name].[hash].min.js',
        path: commonPaths.outputPath
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'static/styles.[hash].min.css',
            allChunks: true
        })
    ]
};

Я также попробовал следующее в моем приложении Express, если оно не обслуживало файлы ...

const express = require('express');
const path = require('path');
const app = express();

app.use(
    express.static(path.resolve(__dirname, '../dist'), {
        index: false,
        fallthrough: true,
        setHeaders: (res) => {
            res.set('Content-Encoding', 'gzip');
        }
    })
);

app.get('/healthz', (req, res) => res.send('OK'));
app.get('*', (req, res) =>
    res.sendFile(path.resolve(__dirname, '../dist/index.html'))
);

const PORT = process.env.SERVER_PORT || 3000;
const HOST = process.env.SERVER_HOST || '127.0.0.1';

app.listen(PORT);
console.log(`API started on ${HOST}:${PORT}`);