Webpack: 414 Request-URI слишком длинный для изображения

Question

Я занимаюсь разработкой веб-сайта с использованием React и использую Webpack для объединения файлов. Я использую несколько изображений .png на сайте, но у меня есть проблема с одним из них, так как при попытке создать пакет это изображение не загружается, и в консоли Google Chrome я читаю что-то вроде этого:

GET http://localhost/bundle/data:image/png;base64,iVBOR...AAAAASUVORK5CYII= 414 (Request-URI Too Long)

Это мое webpack.config.js:

const webpackConfig = env => {
    return {
        mode: env === "development" ? "development" : "production",
        entry: ["./src/index.tsx"],
        output: {
            filename: "bundle.js",
            path: path.join(__dirname, "server/public/bundle/")
        },
        resolve: {
            // Add '.ts' and '.tsx' as resolvable extensions.
            extensions: ['.ts', '.tsx', '.js', '.jsx']
        },
        module: {
            rules: [
                {
                    test: /\.(jsx|tsx|js|ts)$/,
                    loader: "ts-loader",
                    options: {
                        transpileOnly: true,
                         compilerOptions: {
                            target: env === "development" ? "ES6" : "es5"
                        }
                    },
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                    loader: 'url-loader?limit=100000'
                }
            ]
        },
    }
};

module.exports = env => webpackConfig(env);

Изменяя лимит, используемый в url-loader?limit=100000, я заметил, что при 30000 изображение отображается правильно, но многие другие изображения не работают из-за 404 ошибки.

Как я могу решить проблему?

Answer 1

Нет необходимости указывать столько данных, как img sr c, просто уменьшите лимит url-загрузчика.

Если вы немного погуглите, то много об этой проблеме, например

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/414

Как устранить ошибку HTTP 414 «Запрос слишком длинный URI»?

Я знаю, что есть также проблема со старыми браузерами, которые не принимают длинные URI, поэтому я считаю, что есть такой предел.

Я предлагаю снизить ваш предел до максимального 10000