Reactjs Webpack gzip捆绑包-未捕获的语法错误：意外标记<；

我正在做一个react项目，使用webpack进行捆绑。我想减少我的包大小，所以决定使用压缩插件来提供gzip文件，以获得一个很小的包大小。该项目建设良好，我得到了一个很好的小捆绑大小，但我的问题是..当我去服务我的当前项目时，这里是我得到的错误：

查看后，我意识到无论出于什么原因，它都会返回index.html文件，而不是提供main.js或vendor.js的内容

我相当确定我的apache服务器配置为处理gzip编码，正如我在响应头中看到的：

以下是我正在使用的网页包配置：

const appConstants = function() {
    switch (process.env.NODE_ENV) {
        case 'local':
            const localConfig = require('./config/local');
            return localConfig.config();
        case 'development':
            const devConfig = require('./config/development');
            return devConfig.config();
        case 'production':
        default:
            const prodConfig = require('./config/production');
            return prodConfig.config();
    }
};

const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');


const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html",
    hash: true
});

const compressionPlugin = new CompressionPlugin({
    filename: "[path].gz[query]",
    test: /\.(js|css)$/,
    algorithm: 'gzip',
    deleteOriginalAssets: true
});

let webpackConfig = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                exclude: [ /assets/, /node_modules/ ],
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: "[name]_[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true
                        }
                    }
                ]
            },
            {
                test: /\.(pdf|jpg|png|gif|svg|ico)$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'file-loader'
                    },
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'url-loader?limit100000'
                }
            }
        ]
    },
    entry: [ "@babel/polyfill", "./src/index.js"],
    output: {
        publicPath: appConstants().DS_BASENAME ? JSON.parse(appConstants().DS_BASENAME) : '/',
        chunkFilename: '[name].[chunkhash].js'
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
    plugins: [
        htmlWebpackPlugin,
        compressionPlugin,
        new webpack.DefinePlugin({
            'process.env': appConstants()
        }),
        new webpack.EnvironmentPlugin(['NODE_ENV']),
    ],
    devServer: {
        historyApiFallback: true
    }
};

// configure source map per-env
if (process.env.NODE_ENV === 'local') {
    webpackConfig.devtool = 'source-map';
} else {
    webpackConfig.devtool = 'hidden-source-map';
}

module.exports = webpackConfig;

---

我不明白为什么浏览器不能读取/识别gzip。我试过几个类似问题的帖子，但没有解决方案

您需要添加中间件函数来处理后缀为.gz的.js和.css文件 那样

const-app=express（）
app.get（'*.js'，函数（req，res，next）{
req.url=req.url+'.gz'
res.set（'Content-Encoding'，'gzip'）
res.set（'Content-Type'，'text/javascript'）
下一个（）
})
app.get（'*.css'，函数（req，res，next）{
req.url=req.url+'.gz'
res.set（'Content-Encoding'，'gzip'）
res.set（'Content-Type'，'text/css'）
下一个（）
})
应用程序使用（'/dist'，发球（'/dist'，真））
应用程序使用（快速静态（'./dist'））我面临同样的问题。你解决了吗？任何帮助都会很有帮助。@NISHANKKUMAR我没能弄明白。我试了几天，现在运气不错。请将答案贴在这里如果你找到了解决方案，我计划在某个时候再次尝试。@bos570查看index.html文件你的js文件不是以js.gz结尾的。这是一个问题，面对同样的问题。甚至我删除了
.gz
扩展名，同时将文件放在
S3
上，这对构建有帮助。