Ich bin nicht in der Lage ecma6 Import in meinem Code bekommen Fehler "unerwarteten Token-Import"

Question

hier ist mein webpack.config.js Code verwenden i zum Erzeugen von virtuellem bundle.js bin mit: -

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

    module.exports = { 
     devtool :'inline-source-map', //this give us the line no. incase of error 
     entry:[ 
      'webpack-dev-server/client?http://localhost:8080/', 
      'webpack/hot/only-dev-server', 
      './src' 
     ],  //this is where webpack look for the files 
     output : { 
      path : path.join(__dirname, 'build'), 
      filename: 'bundle.js' 
     }, //this is where webpack create the virtual output 

     resolve: { 
      modulesDirectories :['node_modules','src'], //this is where webpack look for module directories 
      extensions : ['','.js'], // this is the extension for which webpack look for 

     }, 
     module:{ 
      loader :[ 
       { 
        test: /\.jsx?$/, //this is to for we can use jsx file if not js file 
        exclude: /node_modules/, //the part which are not included in our app build 
        //loader: 'babel-loader' 
        loaders : ['react-hot','babel-loader','babel?presets[]=react,presets[]=es2015'], // the module which are used to load our app 
       } 
      ] 
     }, 
     plugins:[ 
      new webpack.HotModuleReplacementPlugin(), //for live reloading 
      new webpack.NoErrorsPlugin() // stop app to run if there is any error 
     ] 

    } 

und lasse funktioniert gut, aber diese ecmascript6 Schlüsselwörter wie Klasse und Import funktionieren nicht.

webpack 1.13.1 Knoten Version 6.3.1 npm 3.10.3

package.json

{ 
     "name": "react-todos", 
     "version": "1.0.0", 
     "description": "", 
     "main": "index.js", 
     "dependencies": { 
      "react": "^15.3.0", 
      "react-dom": "^15.3.0" 
     }, 
     "devDependencies": { 
      "babel-cli": "^6.11.4", 
      "babel-core": "*", 
      "babel-loader": "*", 
      "babel-preset-es2015": "*", 
      "babel-preset-react": "*", 
      "react-hot-loader": "*", 
      "webpack": "*", 
      "webpack-devserver": "*" 
     }, 
     "scripts": { 
      "test": "echo \"Error: no test specified\" && exit 1" 
     }, 
     "keywords": [], 
     "author": "", 
     "license": "ISC" 
     } 

meinen Code für index.js: -

import React from 'react'; 
    import { render } from 'react-dom'; 
    import App from 'component/app'; 

    console.log("hiii") 
    render(<App />, document.getElementById('app')) 

Answer 1

Es sieht aus wie webpack ist nicht loading Ihre Lader. Wenn Sie in Ihre Webpack-Konfigurationsdatei schauen, sehe ich ein mögliches Problem, das verhindern kann, dass das Webpack nicht ordnungsgemäß geladen wird. Laden der Loader. Ihr Modul loader Feld fehlt die Endung s. Webpack erwartet ein loaders Feld und Sie stellen stattdessen loader zur Verfügung, das ignoriert wird.

Es ist subtil, aber könnte die Ursache sein.