Webpack React 在 html 标签上构建抛出错误答案

【问题标题】：Webpack React build throwing errors on html tagsWebpack React 在 html 标签上构建抛出错误
【发布时间】：2017-01-02 19:58:41
【问题描述】：

每次运行 npm start 时都会出现错误，这是我的错误....

ERROR in ./app/App.js
Module build failed: SyntaxError: Unexpected token (8:3)

   6 |  render() {
   7 |      return (
>  8 |          <div>
     |          ^
   9 |              Testing this
  10 |          </div>
  11 |      )

这是在一个简单的反应组件中。出于某种原因，html 标签在我的构建中导致错误。下面是我的 webpack.config.js 和 package json 文件。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

json 包

{
  "name": "lr",
  "version": "1.0.0",
  "description": "",
  "main": "App.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "sam",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.25.0",
    "sass": "^0.5.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-hot-loader": "^1.3.1",
    "react-router": "^3.0.0"
  }
}

不知道为什么 html 标签会抛出错误。

【问题讨论】：

标签： reactjs tags webpack

【解决方案1】：

您需要通知webpack，您还希望它使用.jsx 扩展。尝试更新您的测试模式：

{
    test   : /\.(js|jsx)$/,
    loaders: ['babel'],
    include: path.join(__dirname, 'src')
}

您还需要一个.babelrc 文件，然后通知babel 您希望它如何执行编译：

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

在这里查看一个有效的实现：https://github.com/mikechabot/react-boilerplate

【讨论】：

就是这样 - 我完全忘了添加 babel 文件