从命令行运行 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 ，执行以下步骤

1. npm i --save-dev babel-loader babel-preset-react babel-preset-es2015

2. 添加到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

1. npm i --save-dev babel-loader @babel/core @babel/preset-react @babel/preset-env
2. 添加到webpack.config.js babel-loader的配置

  rules: [ 
    { 
      test: /\.jsx?$/, 
      exclude: /(node_modules)/, 
      use: { 
        loader: 'babel-loader', 
        options: { 
          presets: ['@babel/preset-env', '@babel/preset-react'] 
        } 
      } 
    } 
  ]