Webpack 构建失败：带有 react-jsx 文件的意外标记

Question

我无法让 Webpack 处理以下内容，非常感谢您的帮助：

我的 test.jsx 文件：

import React from 'react';
import { render } from 'react-dom';

render(
  <button>OK!</button>
);

我的webpack.config.js:

const webpack = require('webpack');
const commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
  entry: {
    front_desk: './front/client/test',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  output: {
    path: 'front/public/js',
    filename: '[name].js', // Template based on keys in entry above
  },
  module: {
    loader: 'babel-loader',
  },
  plugins: [commonsPlugin],
};

和我的 .babelrc:

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

以及准确的错误：

ERROR in ./front/client/test.jsx
Module parse failed: /../front/client/test.jsx Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:2)

Answer 1

我认为您需要为 jsx 文件设置适当的加载程序：

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

babel-loader info

Webpack 构建失败：带有 react-jsx 文件的意外标记

Webpack build fail: unexpected token with react-jsx file

reactjs

webpack

react-jsx