[英]404s on some images from Webpack url-loader
关于此有很多问题,有很多答案,请阅读以下内容,以查看我的尝试以及它们是如何工作的。 我认为我的问题来自对URL加载程序的工作原理的基本误解。
我的.less文件中包含这样的图像。 我使用两种不同的格式作为我尝试过的示例。
app.less
#logo {
background-image: url("~/img/LoginMarketingImage.png");
}
#logotwo{
background-image: url("../public/img/LoginMarketingImage2.png");
}
webpack.config.js
module.exports = {
context: path.resolve(__dirname, '../../'),
entry: {
app: './public/js/app.js'
},
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js',
publicPath: '/'
},
我也尝试过
webpack.config.js
module.exports = {
context: path.resolve(__dirname, '../../'),
entry: {
app: './public/js/app.js'
},
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js',
publicPath: ''
},
以及以下内容基于: webpack css-loader在外部样式表的url()引用中未找到图像
webpack.config.js
module.exports = {
context: path.resolve(__dirname, '../../'),
entry: {
app: './public/js/app.js'
},
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js',
publicPath: 'https://localhost:9081/'
},
我的模块配置看起来像
webpack.config.js
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 2000000,
name: utils.assetsPath('img/[name].[ext]')
}
},
]
}
我尝试了1或更高的限制,以查看内联还是非内联作品。
我的文件夹结构如下
build/
less/
app.less
public/
img/
LoginMarketingImage.png
LoginMarketingImage2.png
config/
webpack/
webpack.config.js
我的结果
如果将限制设置为1,并强制所有图像直接输出,则仅当它们使用url("../")
语法时才输出它们。 url("~/")
不会引发webpack错误,但是图像不会输出到build文件夹。 在这种情况下,使用url("../")
语法的图像在浏览器中也不会引发任何错误。 但是,这并不理想,因为我想利用url-loader返回DataURL的功能。 在这种情况下,无论publicPath
设置如何,使用url("~/")
语法的图像都会出现错误GET https://localhost:9081/img/logo.png 404 (Not Found)
。
如果我将限制设置为20000000,显然file-loader
不会将任何图像放置在build文件夹中。 但是,无论publicPath
设置如何,所有图像在浏览器中均返回404。
我觉得我误会了如何使用url-loader
。 我需要哪种配置?如何利用更少的文件来利用url-loader返回DataURL的能力?
编辑:基于此问题 ,我确保禁用了CSS源映射。
我在这里无法查明问题,但似乎是publicPath配置是问题所在。 为了使url加载程序正常工作,我将示例要点与最小要求结合在一起 。
注意事项:
test
选项正确 project-root-dir/node_modules
的快捷方式(至少在webpack 1.x中) name
选项。 更改路径可能会使Webpack感到困惑
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.