Webpack:414图像的请求URI太长

Question

我正在使用React开发一个网站，并使用Webpack捆绑文件。我在网站上使用了几个.png图像，但我对其中一个有问题，因为当我试图创建包时，这个图像没有加载，在谷歌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那样内联那么多数据src，只需降低url加载器的限制即可。

如果你在谷歌上搜索一个小比特，就会发现这个问题很多，例如

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

如何解析HTTP 414"；请求URI太长"；错误

我知道旧的浏览器也有问题，它们不接受长URI，所以我认为这就是为什么有这个限制的原因。

我建议将您的限制降低到最大1000