Webpack file loader outputs empty png images

Question

I run into a very weird problem when I try to use file loader.

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

My config is like this

    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'
        })
    ]

I get the following output:

                               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

In browser, the console.log gives me

/assets/picture.png

So basically, webpack parses a single image to two. And the one with the hash as name is the image I want, and the picture.png is an empty image. Very strange.

Answer 1

In your above snippet, the loader referenced appears to be file. Should it not be file-loader?

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

FWIW, in my case, I had two conflicting rules:

{
  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 above was redundant as url-loader will fall back to file-loader beyond the limit. So I removed the file-loader rule.