ecmascript-6webpackreactjsurlloader

Webpack runs Babel against PNG


Here is my webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry: {
    javascript: './static/jsx/main.jsx'
  },
  output: {
      path: path.resolve('./static/js/app/'),
      filename: 'bundle.js'
    },
  module: {    
    preLoaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'source-map'
        }
    ],
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.(jpg|png)$/,
        loader: 'url-loader?limit=25000',
        include: path.resolve('./static/images/')
      }
    ]
  },
};

Here is example of using png in a jsx file

import L            from 'leaflet';
import { LayersControl, Marker, Popup } from 'react-leaflet';

const src = require('./marker-icon-red.png');
//Extend the Default marker class
let RedIcon = L.Icon.Default.extend({
  options: {
        iconUrl: src 
  }
});
let redIcon = new RedIcon();

When I run webpack for my jsx files (using gulp)

gulp.task('transform', function() {
  return gulp.src(path.JS)
    .pipe(webpack( require('./webpack.config.js') ))
    .on('error', swallowError)
    .pipe(gulp.dest(path.DEST_BUILD));
});

I get this error

[15:14:10] Starting 'transform'...
Error in plugin 'webpack-stream'
Message:
    ./static/jsx/map/markers/marker-icon-red.png
Module parse failed: D:\work\Cycling\static\jsx\map\markers\marker-icon-red.png
Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)
    at Parser.pp$4.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2468:15)
    at Parser.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:515:10)
    at Object.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:3098:39)
    at Parser.parse (D:\work\Cycling\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (D:\work\Cycling\node_modules\webpack\lib\N
ormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (D:\work\Cycling\node_modules\webpack-cor
e\lib\NormalModuleMixin.js:310:10)
    at nextLoader (D:\work\Cycling\node_modules\webpack-core\lib\NormalModuleMix
in.js:275:25)
 @ ./static/jsx/map/markers/parkings_markers.jsx 19:10-42
[15:14:21] Version: webpack 1.13.2
    Asset     Size  Chunks             Chunk Names
bundle.js  1.48 MB       0  [emitted]  javascript

ERROR in ./static/jsx/map/markers/marker-icon-red.png
Module parse failed: D:\work\Cycling\static\jsx\map\markers\marker-icon-red.png
Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)
    at Parser.pp$4.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2468:15)
    at Parser.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:515:10)
    at Object.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:3098:39)
    at Parser.parse (D:\work\Cycling\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (D:\work\Cycling\node_modules\webpack\lib\N
ormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (D:\work\Cycling\node_modules\webpack-cor
e\lib\NormalModuleMixin.js:310:10)
    at nextLoader (D:\work\Cycling\node_modules\webpack-core\lib\NormalModuleMix
in.js:275:25)
 @ ./static/jsx/map/markers/parkings_markers.jsx 19:10-42
[15:14:21] Finished 'transform' after 11 s

As I understood it's babel tries to read png file, although I told webpack that png files should be treated by url-loader not babel.

What am I doing wrong?

Thanks for help!


Solution

  • Your url-loader config is set to only consider images from ./static/images, because of the include property:

    {
      test    : /\.(jpg|png)$/,
      loader  : 'url-loader?limit=25000',
      include : path.resolve('./static/images/')
    }
    

    However, the image you're trying to require is located in a different directory (./static/jsx/map/markers/).

    If you remove the include, it'll probably work.