Загрузчик файлов Webpack выводит пустые изображения png

Question

Я сталкиваюсь с очень странной проблемой, когда пытаюсь использовать загрузчик файлов.

 var sunTextureUrl = require("file?name=picture.png!../textures/flare.png");
 console.log(sunTextureUrl);

Мой конфиг такой

    output: {
        path: path.resolve(__dirname, 'assets'),
        publicPath: "/assets/",
        filename: "[name].js"
    },
    module: {
        loaders: [
            {test: /\.(gif|png|jpe?g|svg)$/i, loader: 'file'},
            {test: /\.glsl$/, loader: 'webpack-glsl'},
            {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query: {
              presets: ['es2015']
            }}
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: "vendors.js"}),
        new webpack.optimize.UglifyJsPlugin(minifiedOpt),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(opt.production ? 'production' : 'development')
            }
        }),
        new webpack.ProvidePlugin({
          THREE: 'three'
        })
    ]

Я получаю следующий вывод:

                               Asset      Size  Chunks             Chunk Names
c8510617bc54cb2c5b707a4dfdb98337.png   13.2 kB          [emitted]
                         picture.png  82 bytes          [emitted]
                             main.js   12.5 kB       0  [emitted]  main
                          vendors.js    491 kB       1  [emitted]  vendors

В браузере console.log дает мне

/assets/picture.png

Таким образом, в основном, веб-пакет анализирует одно изображение на два. И тот, у которого в качестве имени указан хеш, - это изображение, которое я хочу, а picture.png - пустое изображение. Очень странно.

Answer 1

В приведенном выше фрагменте упомянутый загрузчик выглядит как file. Не должно быть file-loader?

{ test: /\.(gif|png|jpe?g|svg)$/i, loader: 'file-loader' },

FWIW, в моем случае у меня было два противоречивых правила:

{
  test: /\.(png|jpe?g|gif)$/i,
  use: [
    {
      loader: 'file-loader',
    },
  ],
},
{
  test: /\.(png|jpe?g|gif|svg)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
      },
    },
  ],
},

file-loader выше было избыточным, поскольку url-loader вернется к file-loaderза пределы. Поэтому я удалил file-loader правило.