Webpack. Url-loader возвращает косячный url, в чём проблема?

Question

[Yaroslav Lyzlov]

Добрый день. В общем, такая беда, url-loader возвращает кривой base64.

require('url?limit=10000!./resources/images/obladaet.jpg');

webpack conf

{ test: /\.jpg$/,    loader: "url-loader?prefix=img/" },

И ещё вопрос: как url-loader использовать вместе со stylus?

Answer 1

[Станислав Дубровский]

Привет. Как раз исользую stylus. У меня в конфиге вот так:

{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192' }
{ test: /\.styl$/, loader: "style-loader!css-loader!stylus-loader?paths[]=node_modules&paths[]=app" }

Картинки подключаю через стили, webpack сам кладет их в сборку.

.vusluk-logo
  background-image url(./logo.png)

Comments

[Yaroslav Lyzlov]

То есть, вебпак url воспринимает как модуль, я правильно понимаю?

[Станислав Дубровский]

Я не очень хорошо знаю webpack. Видимо да, как модуль, если ты о url-loader.

module: {
      loaders: [
          { test: /\.css$/,
          loader: "style-loader!css-loader"
        }
        , { test: /\.styl$/,
          loader: "style-loader!css-loader!stylus-loader?paths[]=node_modules&paths[]=app"
        }
        , { test: /\.ls$/,
          loader: "livescript-loader"
        }
        , { test: /\.jade$/,
          loader: "jade-loader"
        }
        , { test: /\.json$/,
          loader: "json-loader"
        }
        , { test: /\.ttf(?:\?v=[\d.]+)?$/,
          loader: "file-loader"
        }
        , { test: /\.svg(?:\?v=[\d.]+)?$/,
          loader: "file-loader"
        }
        , { test: /\.(png|jpg|gif)$/,
          loader: 'url-loader?limit=8192'
        }
      ]
}

Answer 2

[frontendthug]

test: /\.jpg$/,    loader: "url-loader?name=img/[name].[ext]"