webpack错误：您可能需要一个合适的加载程序来处理此文件类型

Question

我尝试了很多方法，我搜索了stackoverflow，仍无法解决。 我是一个反应新手。

错误：

ERROR in ./public/js/index.jsx 
Module parse failed: /home/m/react/r-chat/front/public/js/index.jsx Line 3: Unexpected token 
You may need an appropriate loader to handle this file type. 
| /*'use strict';*/ 
| 
| import React, { Component, ProTypes } from 'react'; 
| import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router'; 
| import Avatar from './components/avatar.jsx'; 

而且我的WebPack文件：

var webpack = require('webpack'); 

module.exports = { 
    entry: './public/js/index.jsx', 
    output: { 
    path: './build', 
    filename: "bundle.js" 
}, 
module: { 
    loaders: [ 
     { 
      test: /\.js?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['es2015','react'] 
      } 
     } 
    ] 
}, 
plugins: [ 
    new webpack.NoErrorsPlugin() 
] 
}; 

Answer 1

您需要.jsx装载机。由于您使用的是.jsx文件，因此.js加载程序将无法正常工作。

变化

{ 
      test: /\.js?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['es2015','react'] 
      } 
     } 

到

{ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['es2015','react'] 
      } 
     } 

Answer 2

你在你的JS测试的WebPack配置的装载机看？您需要为JSX添加它，并为其使用适当的加载程序。

巴贝尔可以通过通天装载机为你做这个：https://github.com/babel/babel-loader

所有你需要做的是为X到测试，像这样：

loaders: [ 
    { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015','react'] 
     } 
    } 
]