使用 Webpack、React、Babel 组合时，React 代码不运行答案

【问题标题】：React code is not running when using Webpack, React, Babel combination使用 Webpack、React、Babel 组合时，React 代码不运行
【发布时间】：2018-02-28 23:44:53
【问题描述】：

我一直在关注 Petr Tichy (@ihatetomatoes) Webpack 2 教程系列，并获得了 this 视频，其中涵盖了安装 React 和 Babel。

我用细齿梳检查了代码并花了几个小时在谷歌上搜索，但我无法让我的代码以预期的方式执行。我的 app.js 文件中的 React 方法不执行。

它应该将“Hello World”渲染到索引页面的根元素中，但我什么也没得到。

这就是我所拥有的……

./src/app.js

const css = require("./styles.scss");

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

./src/index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  <body>
      <div id="root"></div>
  </body>
</html>

webpack.config.js

const HTMLWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { 
                test: /\.scss$/, 
                use: ExtractTextPlugin.extract( { 
                    fallback: 'style-loader', 
                    use: ['css-loader','sass-loader'] 
                } ) 
            },
            { 
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            } 
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            title: "IWTE",
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
            },
            hash: true
        }),
        new ExtractTextPlugin("styles.css")
    ],
    devServer: {
        contentBase: "./dist",
        compress: true,
        hot: true,
        open: true
    },
}

.babelrc

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

package.json

{
  "name": "creator",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --progress --colors",
    "prod": "webpack -p"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "eslint": "^4.7.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

非常感谢任何有关调试此路径的建议或建议！我是前端开发人员的相对菜鸟。谢谢！

【问题讨论】：

尝试查看开发工具。如果您的资产正在被使用。应该找到<script src="dist/app.js"></script>
@ReiDien 我可以看到我的 js 包正在由页面创建和加载。如果我将它们添加到脚本中，控制台日志会按预期显示。据我所知，这只是没有执行的反应代码。
控制台没有错误？
你能分享一个回购吗？很高兴能提供帮助
@ReiDien 谢谢！ github.com/philboltt/webpackReactTest

标签： javascript reactjs webpack frontend babeljs

【解决方案1】：

在您的 package.json 中进行更改：

"scripts": {
    "dev": "webpack-dev-server --hot --progress --colors",
    "prod": "webpack -p"
}

您需要在开发命令中添加 --hot 以启用热重载。

如果它不起作用，请告诉我。干杯！

【讨论】：

哇。我没想到这是原因......但它有效！谢谢@ShubhamJain。
很高兴我能帮上忙 :)