模块构建失败：syntaxerror: Unexpected token (React config)答案

【问题标题】：Module build failed: syntaxerror: Unexpected token (React config)模块构建失败：syntaxerror: Unexpected token (React config)
【发布时间】：2018-06-09 13:06:38
【问题描述】：

我在让 React 与 web pack 配合使用并在这个项目中渲染时遇到了一些问题。我收到语法意外令牌错误。

console error

这是我的 main.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MyComponentClass extends React.Component {
 render() {
  return 'Test Component';
 }
}

ReactDOM.render( <MyComponentClass />, document.getElementById('root'));

这是我的 Webpack.config 文件：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

const config = {
  entry: {
  app: './client/scripts/main.js',
  },

  output: {
    filename: 'app.js',
    path: path.join(__dirname, 'public')
  },

  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        include: __dirname + '/client/scripts',
        loader: 'babel-loader',
       },

  {
    test: /\.css$/,
    loader: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader: 'css-loader',
          options: {
            sourceMap: true,
            modules: true,
            importLoaders: 1,
            localIdentName: '[name]__[local]'
          }
        },
        {
          loader: 'postcss-loader',
        },
      ],
    })),
  },
  {
    test: /\.html/,
    loader: 'html-loader',
  },
  {
    test: /\.(jpe?g|png|gif)$/i,
    loader: 'file-loader',
    options: {
      hash: 'sha512',
      digest: 'hex',
      name: 'images/[name].[ext]',
    },
  },
],
 },
 plugins: [
   new ExtractTextPlugin({
   filename: 'app.css',
   ignoreOrder: true,
   }),
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ['.css', '.js'],
    modules: [
      path.join(__dirname, 'src'),
      'node_modules',
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, "public"),
    hot: true,
    port: 8005,
  }
};

module.exports = config;

还有我的 package.json

{
  "name": "jumpcloud-ui-assignment",
  "version": "1.0.0",
  "description": "A project that can be used to asses front end developers",
  "repository": {
    "type": "git",
    "url": "git://github.com/TheJumpCloud/jumpcloud-ui-assignment.git"
  },
  "private": true,
  "author": "JumpCloud",
  "bugs": {
    "url": "https://github.com/TheJumpCloud/jumpcloud-ui-assignment/issues"
  },
  "scripts": {
    "start:client": "webpack-dev-server --progress --inline",
    "start:server": "node server/server.js"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "css-hot-loader": "^1.3.3",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "postcss-loader": "^2.0.8",
    "script-loader": "^0.7.2",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

我确定这是一个 webpack 配置问题，在这里我发现了其他类似的问题之后我是空白的。

【问题讨论】：

标签： reactjs webpack ecmascript-6

【解决方案1】：

将“.babelrc”文件添加到您的项目中，其中包含

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

应该没问题

【讨论】：

babel 团队建议使用env 预设而不是es2015，有关babel homepage 的更多信息。那么当然应该安装babel-preset-env 而不是babel-preset-es2015。
我应该补充一点，我已经有一个包含这些预设的 .babelrc 文件。