webpack + babele - reagire, token imprevisto 'import'

Question

Sto provando a fare funzionare index.js con es2015.

Prima di dirigere me a .babelrc, notare che io ho aggiunto sia es2015 e reagire (per essere sicuri, ma non c'è reagiscono qui).

È dotato di

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

Ed ecco .babelrc:

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

E 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'] 
    } 
} 

dà errore:

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 

Perché non sta gestendo il token di importazione?

Answer 1

La struttura webpack.config.js non è corretta. Webpack non riconosce tutti i caricatori. Nello specifico, è necessario inserire le proprietà del programma di caricamento all'interno di una sezione del modulo in questo modo:

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