Babel/webpack没有读jsx

Question

有一点麻烦,我的反应/的We​​bPack成立,JSX的第一位击中,我"意外的标记" - 在第一<在JSX.这是我的Webpack配置:

 const path = require('path');

 const webpack = require('webpack');

module.exports = {
entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './app/index.jsx'
],
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }]
},
resolve: {
    extensions: ['', '.js', '.jsx']
},
output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
},
devServer: {
    contentBase: './dist',
    hot: true
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

};

我注意到如果我交换加载器使用react-hot,它不再知道如何读取es6导入:

  module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: path.join(__dirname, 'src'),
        loader: 'react-hot!babel'
    }]
},

(给出错误 - 意外的令牌您可能需要一个合适的加载器来处理这种文件类型.引用导入行)

不确定我在这里缺少什么,可以使用一些帮助.谢谢!

Answer 1

如果你使用的是Babel 6.0,它将不再默认转换你的代码.(https://babeljs.io/blog/2015/10/29/6.0.0/),它说:

由于Babel专注于成为JavaScript工具的平台,而不是ES2015转换器,我们决定让所有插件选择加入.这意味着当您安装Babel时,它将不再默认转换您的ES2015代码.

如果要转换代码,则需要安装两个预设:

npm install --save-dev babel-preset-es2015 babel-preset-react

在webpack.config.js中,您可以指定使用如下的预设:

loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },