您可能需要適當的加載程序來處理此文件類型。 與webpack

Question

根據這一偉大的教程- https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack -我想學反應。

源代碼如下所示：

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

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

Answer 1

我不得不包裝loader:在module又名

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