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'] 
     } 
    } 
]