javascript - Webpack 未编译 - 模块构建失败

Question

我刚刚为我的 react.js 应用程序 设置我的开发环境，但我遇到了 webpack 拒绝编译的错误。我收到错误消息模块构建失败:语法错误:第 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。