404s 在来自 Webpack url-loader 的某些图像上

关于这个问题有很多问题，也有很多答案，请阅读以下内容，看看我尝试过什么，以及它们是如何不起作用的。我认为我的问题来自对网址加载器工作原理的根本误解。

我的 .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 错误，但图像不会输出到构建文件夹。在这种情况下，使用url("../")语法的图像也不会在浏览器中引发错误。但是，这并不理想，因为我想利用 url 加载器返回 DataURL 的能力。在这种情况下，无论publicPath设置如何url("~/")，使用语法的图像都会给出错误GET https://localhost:9081/img/logo.png 404 (Not Found)。

如果我将限制设置为 20000000，显然没有图像被file-loader放入构建文件夹中。但是，无论设置如何publicPath，所有图像都会在浏览器中返回 404。

我觉得我误解了如何使用url-loader.我需要什么样的配置，以及我应该如何要求我的文件更少，以利用 url 加载器返回 DataURL 的能力？

编辑：基于这个问题，我确保禁用css源映射。

我无法在这里查明问题所在，但似乎 publicPath 配置是问题所在。我把一个示例要点放在一起，其中包含使 url 加载器正常工作所需的最小值。

需要注意的一些事项：

确保test选项正确
没有提到您正在使用哪个版本的 webpack，但我认为它是> 2。如果是 == 2，那么您应该升级，因为较新版本修复了很多错误，并且配置 API 几乎 100% 兼容
不要使用波浪号导入路径，它是project-root-dir/node_modules的快捷方式(至少在 webpack 1.x 中)
我假设你正在使用webpack-dev-server。如果没有，那么你应该不需要设置公共路径等
不要更改 url 加载器的name选项，除非您在没有它的情况下一切正常。更改其路径可能会混淆 webpack

相关内容

最新更新

热门标签：