Webpack:414 Request-URI Too Long for an image
Webpack: 414 Request-URI Too Long for an image
我正在使用 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 错误而无法工作。
我该如何解决这个问题?
不需要像imgsrc那样内联那么多数据,只要降低url-loader的限制即可。
如果你 google 一点点,这个问题有很多,例如
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/414
我知道旧版浏览器也存在问题,它们不接受长 URI,所以我认为这就是为什么存在该限制的原因。
我建议将你的 limit 降低到最大值 10000
我正在使用 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 错误而无法工作。
我该如何解决这个问题?
不需要像imgsrc那样内联那么多数据,只要降低url-loader的限制即可。
如果你 google 一点点,这个问题有很多,例如
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/414
我知道旧版浏览器也存在问题,它们不接受长 URI,所以我认为这就是为什么存在该限制的原因。
我建议将你的 limit 降低到最大值 10000