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

Question

有很多很多的问题，还有很多答案，请阅读下文以了解我尝试过的方法，以及它们为何不起作用。我认为我的问题来自对 url-loader 工作原理的根本误解。

我的 .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.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-loader 的能力来 return 一个 DataURL。在这种情况下，无论 publicPath 设置如何，使用 url("~/") 语法的图像都会给出错误 GET https://localhost:9081/img/logo.png 404 (Not Found)。

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

我觉得我误解了如何使用 url-loader。 我需要什么样的配置，我应该如何要求我的文件更少，以利用 url-loader 对 return DataURLs 的能力？

编辑：基于this issue，我已确保禁用css 源映射。

Answer 1

我无法确定这里的问题，但问题似乎出在 publicPath 配置上。我 threw together a sample gist 最低需要让 url-loader 正常工作。

一些注意事项：

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

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

404s on some images from Webpack url-loader

javascript

webpack

urlloader