从命令行运行webpack时,我整天都遇到此错误:
ERROR in ./index.js
Module parse failed: /home/kuro/Workspace/ExpressJS/corate/src/index.js Line 10: Unexpected token <
You may need an appropriate loader to handle this file type.
| render:function(){
| return (
| <div>
| <div className="left">
| <img src={mac}/>
这是我在index.js中的代码
var React=require('react');
var ReactDOM=require('react-dom');
var style=require('../public/css/style.css');
var mac=require('../public/images/img_landing_page_mac.png');
var chrome=require('../public/images/btn_get_chrome.png');
var Content=React.createClass({
render:function(){
return (
<div>
<div className="left">
<img src={mac}/>
</div>
<div className="right">
<h2 style={font-size: '33px', letter-spacing: '5px'}>
Organize <br>Modern Knowledge<br> for Mankind
</h2>
<p style={font-size: '20px', margin-top: '35px', letter-spacing: '4px'}>
Consume, Colect and Revisit <br>Knowledge at Your Fingertips
</p>
<a href="#" style={margin-top: '80px', display: 'inline-block', margin-left: '-17px'}>
<img src={chrome}/>
</a>
</div>
</div>
);
}
});
ReactDOM.render(<Content/>,document.getElementByClassName('container'));
并在webpack.config.js中配置:
module.exports={
context: __dirname+'/src',
entry:'./index.js',
output:{
path:__dirname+'/static',
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.png$/,
loader:'url?limit=10000'
},
{
test:/\.jpg$/,
loader:'url?limit=10000'
},
{
test:/\.css$/,
loader:'style!css'
}
]
}
}
我无法弄清楚它有什么问题.我在这里错过了什么吗?
最佳答案 您需要添加
babel-loader
,使用
react preset
,执行以下步骤
> npm i –save-dev babel-loader babel-preset-react babel-preset-es2015
>为babel-loader添加到webpack.config.js配置(到加载器:[..]部分)
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}