1

私はいくつかのフロントエンドを学ぶことに決めたバックエンドの男ですが、環境を構成することさえできないので、学ぶにはほど遠いようです。

私の目標は、Babel 6、React、react-hot、および HotModuleReplacementPlugin を使用して Webpack をセットアップすることです。また、アプリに Express.js サーバーが必要です。だからここに私の設定があります：

サーバー.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')
      }
    ]
  }
}

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

そして、これが私のコンソールにあるものです（エラーはループしています）：

エラーループ

4

0 に答える 0