GZIP-пакет Webpack - необработанная ошибка синтаксиса: неожиданный токен < - PullRequest
Новая
       18

GZIP-пакет Webpack - необработанная ошибка синтаксиса: неожиданный токен <

0 голосов
/ 08 января 2019

Я работаю над реактивным проектом с использованием веб-пакета для комплектации. Я хотел уменьшить размер своего пакета, поэтому решил использовать плагин сжатия для предоставления файла gzip, чтобы получить хороший маленький размер пакета. Проект строится нормально, и я получаю небольшой пакетик, но вот мои проблемы ... когда я иду обслуживать свой текущий проект, вот ошибка, которую я получаю:

enter image description here

Посмотрев, я понял, что по какой-то причине вместо того, чтобы обслуживать содержимое main.js или vendor.js, он возвращает мой файл index.html

enter image description here

Я вполне уверен, что мой сервер apache настроен на обработку кодировки gzip, как я вижу в заголовке ответа:

enter image description here

Вот конфигурация веб-пакета, которую я использую: 

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 не читается / не распознается браузером. Я пробовал несколько постов с похожими проблемами, но без решений

1 Ответ

0 голосов
/ 04 апреля 2019

Вам нужно добавить функцию промежуточного программного обеспечения для обработки файлов .js и .css с суффиксом .gz Вот так 

const app = express()

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

app.get('*.css', function(req, res, next) {
  req.url = req.url + '.gz'
  res.set('Content-Encoding', 'gzip')
  res.set('Content-Type', 'text/css')
  next()
})

app.use('/dist', serve('./dist', true))
app.use(express.static('./dist'));

Вы должны добавить функцию промежуточного программного обеспечения перед express.static

Удачи!

...