javascript - 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 css-loader not finding images within url() reference in an external stylesheet

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

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

我觉得我误解了如何使用url-loader。 我需要什么样的配置，以及我应该如何在 less 中要求我的文件，以利用 url-loader 返回 DataURL 的能力？

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

Answer 1

我无法确定这里的问题，但似乎 publicPath 配置是问题所在。我threw together a sample gist至少你需要让 url-loader 正常工作。

一些注意事项:

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