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文件的意外令牌

1 个答案: