Question

我只是为我的 react.js应用设置我的开发环境，而且我遇到了webpack拒绝编译的错误。我收到错误模块构建失败：SyntaxError：第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。

Webpack没有编译 - 模块构建失败

1 个答案: