Webpack 未编译 - 模块构建失败

Question

我只是为我的 react.js 应用程序 设置我的开发环境，我遇到了 webpack 拒绝编译的错误。我收到错误 Module build failed: SyntaxError: Unexpected token at line 5。第 5 行是render (<App />, document.getElementById('app'));。我已将<script type="text/babel>" 添加到我的 index.html 上的脚本标记中，但我仍然遇到同样的错误。

这是我的 webpack.config.js：

var webpack = require('webpack');
var path = require('path');

module.exports = {
  devtool: 'inline-source-map',
  entry: [
      'webpack-dev-server/client?http://127.0.0.1:8080/',
      'webpack/hot/only-dev-server',
      './src'
  ],
  output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
  },
  resolve: {
      modules: ['node_modules', 'src'],
      extensions: ['.js', '.jsx']
},  
module: {
    rules: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['react-hot-loader', 'babel-loader']
    }
    ]
},

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()

};

我的app.js：

import React from 'react';


export default class App extends React.Component {
  render() {
      return (
          <div>
              <h1>My React App</h1>
          </div>

      );
   }
}

还有我的 index.js

import React from 'react';
import { render } from 'react-dom';
import App from './components/app';

render ( <App />, document.getElementById('app'));

我做错了什么？

Answer 1

你可以尝试添加一个 .babelrc 文件吗：

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

然后做：

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

确保您也安装了babel-loader。