Webpack 针对 PNG 运行 Babel

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

当我为我的 jsx 文件运行 webpack 时（使用 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));
});

我收到这个错误

[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.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
    at Parser.pp.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
    at Parser.pp.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
    at Parser.pp.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.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
    at Parser.pp.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
    at Parser.pp.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
    at Parser.pp.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 png 文件应该由 url-loader 而不是 babel 处理。

我做错了什么？

感谢帮助！

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，它可能会起作用。

Answer 2

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

Webpack 针对 PNG 运行 Babel

Webpack runs Babel against PNG

urlloader

ecmascript-6

webpack

react-jsx