webpack + babel - 反应,意外令牌'导入'
问题描述:
我正在尝试使index.js与es2015一起使用。webpack + babel - 反应,意外令牌'导入'
,我向.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
为什么不处理导入令牌?
答
您的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" }
],
}
+0
优秀,多么非常挑剔:) – Henrik
@Henrik - 您可以尝试将JavaScript加载器更改为'babel'吗? –
我也有这个问题,并且必须在导入中包含文件扩展名; 'import {...} from'。/ logary.js'' –
@Daniel_L文件扩展名不需要'import'关键字。 –