webpack + babel - 反应，意外令牌'导入'

Question

我正在尝试使index.js与es2015一起使用。

，我向.babelrc之前，请注意，我有添加BOTH ES2015和反应（可以肯定的，但有没有在这里发生反应）。

设有

import { default as Logary, Targets, getLogger, build } from 'logary'; 

而这里的.babelrc：

{ 
    "presets": ['es2015', 'react'] 
} 

而且webpack.config.js

var webpack = require('webpack'), 
    HtmlWebpackPlugin = require('html-webpack-plugin'), 
    path = require('path'); 

module.exports = { 
    devtool: 'source-map', 
    entry: [ 
    'webpack-hot-middleware/client?reload=true', 
    './index.js' 
    ], 
    output: { 
    path: path.resolve('./dist'), 
    filename: '[name].js', 
    publicPath: '/' 
    }, 
    loaders: [ 
    { test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
    }, 
    { test: /\.css$/, loader: "style!css" }, 
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' }, 
    { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" }, 
    { test: /\.svg$/, loader: "file" } 
    ], 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     filename: 'index.html', 
     template: 'index.template.html' 
    }), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('development') 
    }) 
    ], 
    resolve: { 
    extensions: ['', '.js'] 
    } 
} 

给出错误：

ERROR in ./index.js 
Module parse failed: /Users/h/logary-js/examples/webpack/index.js Line 1: Unexpected token 
You may need an appropriate loader to handle this file type. 
| import { default as Logary, Targets, getLogger, build } from 'logary'; 
| 
| // once per site/app 

为什么不处理导入令牌？

Answer 1

您的webpack.config.js结构不正确。 Webpack不能识别你所有的加载器。具体而言，您需要将加载器属性放入模块部分，如下所示：

module: { 
    loaders: [ 
    { test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
    }, 
    { test: /\.css$/, loader: "style!css" }, 
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' }, 
    { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" }, 
    { test: /\.svg$/, loader: "file" } 
    ], 
}