私はエラー「予期しないトークンのインポート」を取得し、私のコードでecma6インポートを使用することはできませんよ

Question

ここでは、私は仮想bundle.jsを生成するために使用しています私のwebpack.config.jsコードです： -

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 
     ] 

    } 

としましょう上手く動作していますが、classやimportなどのecmascript6キーワードは機能しません。 index.jsため

のWebPACK 1.13.1 ノードV6.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" 
     } 

私のコード： -

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

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

Answer 1

それは次のようになりますwebpackはローディングあなたのローダーではありません。あなたのwebpack設定ファイルを見ると、webpackが正しくないのを防ぐことができる可能性のある問題があります。loadローダー。あなたのモジュールloaderには、末尾にsがありません。 Webpackはloadersフィールドを想定しており、代わりに無視されているloaderを提供しています。

module: { 
    loaders: [ 
     ^

微妙ですが、原因が考えられます。