繁体   English   中英

Webpack URL加载器上的某些图像上的404s

[英]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选项正确
  • 您没有提到正在使用哪个版本的Webpack,但我认为它是>2。如果它== 2,那么您应该升级,因为新版本修复了许多错误,并且config API几乎100%兼容
  • 不要使用波浪号导入路径,它是project-root-dir/node_modules的快捷方式(至少在webpack 1.x中)
  • 我假设您正在使用webpack-dev-server。 如果没有,那么您就不需要设置publicPath等
  • 除非您没有使用url-loader的所有功能,否则请不要更改其name选项。 更改路径可能会使Webpack感到困惑

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM