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" } 
    ], 
}