这是我的webpack.config.js文件:
当我使用gulp运行webpack来处理jsx文件时:
我收到了这个错误。
据我理解, babel 试图读取 png 文件,尽管我告诉 webpack 应该使用 url-loader 而不是 babel 处理 png 文件。
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 文件。
我做错了什么?
谢谢帮助!