Question

我没有在屏幕上看到任何输出，但我也没有收到任何错误。我将发布我认为需要的东西。我正在开始一个新项目并尝试一些不同的方式，因此需要一些帮助。

更新：以下是我启动该应用的方法。我从根目录在控制台中运行npm run server，这是脚本"server": "nodemon --watch server --exec babel-node -- server/index.js"

webpack.config：

import path from 'path';
import webpack from 'webpack';

export default {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, './client/index.js')
  ],
  output: {
    filename: 'bundle.js',
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loaders: [ 'react-hot-loader', 'babel-loader' ]
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  }
}

index.js：

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

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

的index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
  </head>
  <body>
    <div id="app"></div>
    <scrip src="bundle.js" type="text/javascript"></scrip>
  </body>
</html>

应用：

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <h1>!Hello from react!</h1>
    )
  }
}

export default App;

服务器index.js：

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';

const app = express();

const compiler = webpack(webpackConfig);

app.use(webpackMiddleware(compiler));
app.use(webpackHotMiddleware(compiler, {
  hot: true,
  publicPath: webpackConfig.output.publicPath,
  noInfo: true
}));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, './index.html'));
});

app.listen(3000, () => {
  console.log('listening on port 3000');
});

Answer 1

<scrip src="bundle.js" type="text/javascript"></scrip>

中的错字

<script>代替<scrip>

使用REACT在屏幕上看不到任何输出

1 个答案: