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

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

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

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

Answer 1

我无法在这里查明问题，但似乎是publicPath配置问题。我{@ 3}}使用minimium，你需要让url-loader正常工作。

有些注意事项：

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

来自Webpack url-loader

1 个答案: