Webpack运行Babel转换PNG图片

Question

这是我的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/')
      }
    ]
  },
};

以下是在jsx文件中使用png的示例：

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();

当我使用gulp运行webpack来处理jsx文件时：

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

我收到了这个错误。

[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

据我理解， babel 试图读取 png 文件，尽管我告诉 webpack 应该使用 url-loader 而不是 babel 处理 png 文件。

我做错了什么？

谢谢帮助！

- Dmytro T

Answer 1

您的url-loader配置被设置为仅考虑来自"./static/images"的图片，这是由于include属性所导致的。

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

然而，您正在尝试require的图像位于不同的目录（./static/jsx/map/markers/）。

如果您移除include，它很可能会工作。

- robertklep

Answer 2

将 img1.PNG 重命名为 img1.png 在我的情况下解决了问题。

- EliteRaceElephant