Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten. mit webpack

Question

Nach diesem tollen Tutorial - https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack - Ich versuche React zu lernen.

Der Quellcode sieht wie folgt aus:

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')); 

Dann habe ich ein Bündel über webpack -d mache und die folgenden 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; 

Das Bündelende mit diesem Fehler:

Module parse failed: C:\DEV\PAT\POC-MERN\client\app\index.jsx Unexpected token (6:15) You may need an appropriate loader to handle this file type.

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

Ich glaube, es ist etwas Triviales. Ich sehe es einfach nicht. Hast du eine Idee?

Answer 1

Ich hatte loader: in 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 
      } 
     ] 
    } 

wrape