node.js - 我无法在我的代码中使用 ecma6 导入，出现错误 "unexpected token import "

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
        ]

    }

并且 let 工作正常，但是这些 ecmascript6 关键字(如 class 和 import)不起作用。

网络包 1.13.1 Node v6.3.1 npm 3.10.3

包.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"
      }

我的 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

看起来 webpack 没有加载你的加载器。查看您的 webpack 配置文件，我发现一个可能的问题可以防止 webpack 无法正确加载加载程序。您的模块 loader 字段缺少结尾的 s。 Webpack 需要一个 loaders 字段，而您提供的是 loader 而被忽略。

module: {
  loaders: [
        ^

这很微妙，但可能是原因。