从命令行运行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'
}
]
}
}
我无法弄清楚它有什么问题。我在这里错过了什么吗?
答案 0 :(得分:2)
您需要添加babel-loader
,react preset
,执行以下步骤
npm i --save-dev babel-loader babel-preset-react babel-preset-es2015
为webpack.config.js
添加babel-loader
个配置(至loaders: [..]
部分)
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
答案 1 :(得分:0)
好伙伴。这可行
module: {
rules: [
// CSS loader here
{
test: /\.svg$/,
use: 'file-loader'
}
]
}
将此添加到您的webpack配置文件 npm install --save-dev样式加载器css-loader