启动express server + nodemon + webpack 1后React.js页面为空答案

【问题标题】：React.js Page is empty after start express server + nodemon + webpack 1启动express server + nodemon + webpack 1后React.js页面为空
【发布时间】：2017-05-11 08:08:42
【问题描述】：

我有以下设置和组件

webpack.config.js

{
  "name": "reddice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "nodemon --watch server --exec babel-node -- server/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "express": "^4.15.2",
    "nodemon": "^1.11.0",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.10.2"
  }
}

webpack.config.js

import path from 'path';

export default {
  devtools: 'eval-source-map',
  entry: path.join(__dirname, '/client/index.js'),
  output: {
    path: '/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loaders: ['babel']
      }
    ]
  },
  resolve: {
    extensions: ['', '.js']

  }    
}

client/index.js

import React from 'react';
import {render} from 'react-dom';
import App from './components/App';

render(<App />, document.getElementById('app'));

客户端/组件/App.js

从“反应”导入反应；

export default () => {
  return (
    <h1>Hello from App component</h1>
  );    
}

服务器/index.html

<!doctype html>

<html lang="en">
  <head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  </head>

  <body>
    <div id="app"></div>

    <script source="bundle.js"></script>
  </body>
</html>

我使用命令 npm run server 运行服务器。显示 webpack: 编译成功。但什么也没有发生。控制台 Web 工具中没有错误的空白页面

【问题讨论】：

标签： javascript node.js reactjs webpack

【解决方案1】：

您的 index.html 假定您的最终捆绑文件名为“bundle.js”。默认情况下，Webpack 使用您提供给入口点的文件的名称。

在你的配置中，输出对象，你必须指定文件名

module.exports = {
   // ..
   output: {
     //..
     filename: '/client/bundle.js'
   }
}

请记住将文件保存在您拥有 index.html 文件的同一文件夹中

【讨论】：