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添加它，并使用适当的加载器。

babel可以通过babel-loader为您做到这一点： https : //github.com/babel/babel-loader

您需要做的就是将x插入测试，如下所示：

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