启动快速服务器nodemon webpack 1后，React.js Page为空-Java 学习之路

我有以下设置和组件

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'));

client/components/App.js

从'react'导入React;

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

server/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 sever运行服务器 . 显示webpack：已成功编译 . 但什么都没发生 . 在控制台Web工具中没有错误的空页面

1 回答

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

在配置输出对象中，您必须指定文件名
```
module.exports = {
   // ..
   output: {
     //..
     filename: '/client/bundle.js'
   }
}
```
请记住将文件保存在index.html文件所在的文件夹中
回复于 2024-05-19T08:59:22+08:00

启动快速服务器nodemon webpack 1后，React.js Page为空

1 回答

相关问题