您可能需要适当的加载程序来处理此文件类型。使用 webpack答案

【问题标题】：You may need an appropriate loader to handle this file type. with webpack您可能需要适当的加载程序来处理此文件类型。使用 webpack
【发布时间】：2016-10-31 20:54:41
【问题描述】：

按照这个很棒的教程 -https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack - 我正在尝试学习 React。

源代码如下所示：

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

render(<App/>, document.getElementById('app'));

然后我通过 webpack -d 和以下 webpack.config.js 制作一个包：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'client/public');
var APP_DIR = path.resolve(__dirname, 'client/app');

    var config = {
        entry: APP_DIR + '/index.jsx',
        output: {
            path: BUILD_DIR,
            filename: 'bundle.js'
        },

        loaders : [
            {
                test : /\.jsx?/, // Files to be processed - *.js and *.jsx
                include : APP_DIR, // Where to look for *.js and *.jsx
                loader : 'babel' // folder name
            }
        ]
    };

    module.exports = config;

包以这个错误结束：

模块解析失败：C:\DEV\PAT\POC-MERN\client\app\index.jsx 意外令牌 (6:15) 您可能需要适当的加载程序来处理这种文件类型。

 class App extends React.Component { 
     render(){ 
         return <p> Hello React!</p>;  <---- This line
     }
 }

我相信这是微不足道的。我只是没看到。你有什么想法吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

我不得不将loader: 换成module aka

module: {
        loaders: [
            {
                test: /\.jsx?/, // Files to be processed - *.js and *.jsx
                include: APP_DIR, // Where to look for *.js and *.jsx
                loader: 'babel' // folder name
            }
        ]
    }

【讨论】：