Reactjs 带有babel loader的网页包无法识别JSX代码

我在使用webpack和babel进行基本设置时遇到困难。我需要babel来编译JSX，我不使用ES2015特性

关于这个确切的问题，这里有很多问题，但它们似乎都可以通过安装

babel preset react

或在

webpack.config.js

中向babel添加预设选项来解决，我想所有这些都已经完成了

我肯定这是我错过的一件简单的事情，但我就是看不见

我将演示问题所需的文件提取到（我在文件名中使用破折号表示子文件夹，因为GIST中不能有文件夹）。我的

webpack.config.js

如下所示：

module.exports = {
  entry: [
    './app/js/app.js'
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: __dirname + '/app/js/',
        loader: 'babel-loader?presets[]=react',
      }
    ]
  },
  output: {
    filename: "bundle.js",
    path: __dirname + '/public'
  },
};

---

注意：在

package.json

中，所有内容都列在“依赖项”下，因为我在heroku上托管它，heroku没有安装devdependencies（至少默认情况下不是这样）

因为它的价值，我目前正在使用带有最新babel的webpack，配置行如下

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

---

由于您不使用es2015，您应该能够在列表中保留react预设。可能是babel loader？presets[]=react没有按您期望的方式工作。

我的头也撞了很长一段时间。结果是，

include

找不到我的目录。正如上面标记答案的注释所指出的，最简单的修复方法是使用排除，例如

排除：/node\u modules/

，或任何需要排除的内容，然后它就会开始工作

如果您是webpack新手，您会发现从上述类型的神秘错误中得到的错误（看起来像是js上的解析错误，尽管您认为babel应该转换JSX；交易是它没有转换）。

这对我来说也确实有效。看来重要的一点是您的

排除

选项。通过使用path.resolve构建路径字符串，我最终使我的

include

也能正常工作。