从命令行运行 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
添加到
webpack.config.js
babel-loader
的配置(至loaders: [..]
部分){ test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel', query: { presets: ['react', 'es2015'] } }
更新: babel-preset-es2015
, babel-preset-react
已弃用,转而使用 @babel/env
和@babel/preset-react
-
npm i --save-dev babel-loader @babel/core @babel/preset-react @babel/preset-env
- 添加到
webpack.config.js
babel-loader
的配置
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
关于parsing - React - 模块解析失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35485821/