Question

我是一个已经决定学习一些前端的后端人员，但似乎我离学习还很远，因为我甚至无法配置环境。

我的目标是使用Babel 6，React，react-hot和HotModuleReplacementPlugin设置Webpack。我也希望应用程序有express.js服务器。所以这是我的配置：

server.js：

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')

var app = new (require('express'))()
var port = 4000

var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/public/index.html')
})

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==> http://localhost:%s/", port)
  }
})

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:4000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    preLoaders: [
      { test: /\.jsx?$/, loader: 'eslint', exclude: /node_modules/ }
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime'],
        include: path.join(__dirname, 'src')
      }
    ]
  }
}

公开/ index.html中

<html>
  <head>
    <title>React setup</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src='bundle.js'></script>
  </body>
</html>

的src / App.js

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>Hello, world!</h1>
    );
  }
}

的src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

这就是我在控制台中得到的内容（错误是循环的）：

试图使React Hot，Express和Webpack协同工作

0 个答案: