的WebPack運行巴貝爾對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文件

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

當我運行的WebPack我的JSX文件使用PNG（使用一整套）

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 PNG文件應該由url-loader而不是babel處理。

我在做什麼錯？

感謝您的幫助！

Answer 1

您的網址加載器配置被設置爲僅從考慮./static/images圖像，因爲include屬性：

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

但是，你想require圖像位於不同的目錄（ ./static/jsx/map/markers/）。

如果您刪除include，它可能會工作。