带有 babel-loader 的 Webpack 无法识别 JSX 代码

Question

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

这里有很多关于这个确切问题的问题，但它们似乎都可以通过安装 babel-preset-react 或在 webpack.config.js 中向 babel 添加预设选项来解决所有这些我已经完成了（我认为）。

我确定这是我遗漏的一个简单的东西，但我就是看不到它。

我只提取了证明我的问题所需的文件到 this 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 中，所有内容都列在 'dependencies' 下，因为我将其托管在不安装 devdependencies 的 heroku 上（至少默认情况下不安装）

Answer 1

对于它的价值，我目前正在使用带有以下配置行的最新 babel 的 webpack

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

由于您不使用 es2015，因此您应该可以将 react 预设保留在列表中。也许 babel-loader?presets[]=react 没有按照您预期的方式工作。

Answer 2

我也为此磕了很久的脑袋。原来 include 没有找到我的目录。正如上面标记答案的评论中指出的那样，最简单的修复方法是使用排除，例如exclude: /node_modules/，或您需要排除的任何内容，它就会开始工作。

如果你是 webpack 的新手，你会发现你从上面得到的错误有点神秘（看起来像你的 js 上的解析错误，即使你认为 babel 应该已经转换了 JSX；交易是它没有）。

带有 babel-loader 的 Webpack 无法识别 JSX 代码

Webpack with babel-loader does not recognize JSX code

jsx

reactjs

webpack

babeljs