node.js - webpack-dev-middleware から生成された js を読み込み、その js を起動する方法

Question

Node JS は初めてです。webpack-hot-middleware を使用して、ホット リロードを備えたバックエンド API サーバーの作成に取り組んでいます。webpack-dev-middleware を使用してサーバー スクリプト (index.js) をメモリにロードし、その javascrip t ファイルを実行しようとしています。

これが私のコードです：リンク

私のコードはホット リロードを正常に実行できることがわかりましたが、サーバー スクリプト (index.js) を読み込んで API サーバーを起動することができません。何らかの理由で、webpack dev サーバーではなく webpack-dev-middleware を使用したいと考えています。

それは私のファイル構造です：

├── package.json.
├── build
|   ├── devserver.js
|   └── webpack.devserver.config.js
├── server
|   └── index.js (code of the API server)
└── dist

HTML をレンダリングするフロント エンドまたはバックエンド サーバーでそれを行う方法についてのチュートリアルをたくさん見つけましたが、index.js を開始する必要があります。

それで、私の質問は、webpack-dev-middleware から生成された js ファイルをロードして、その js ファイルを開始する方法です。

以下は私が試したことです：

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('./webpack.devserver.config');
var StreamCache = require('stream-cache');
var fs = require('fs');

const compiler = webpack(webpackConfig);

const app = express();

const hotMiddleware = webpackHotMiddleware(compiler);
const middleware = webpackMiddleware(compiler, {
    publicPath: "",
    contentBase: 'server',
    stats: {
        colors: true,
        hash: false,
        timings: true,
        chunks: false,
        chunkModules: false,
        modules: false
    }
});
app.use(middleware);
app.use(hotMiddleware);

middleware.waitUntilValid(() => {
    //Then, what should I do??????
  console.log(middleware.fileSystem.readFileSync(path.join(__dirname,               '../dist/backend.js')));
})

webpack.devserver.config.js で:

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

var nodeModules = {};
fs.readdirSync('node_modules')
    .filter(function (x) {
        return ['.bin'].indexOf(x) === -1;
    })
    .forEach(function (mod) {
        nodeModules[mod] = 'commonjs ' + mod;
    });

module.exports = {
    devtool: 'eval-source-map',
    entry: [
        'webpack/hot/signal.js',
        './server/index.js'
    ],
    target: 'node',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'backend.js',
        publicPath: ''
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({

        })
    ],
    recordsPath: path.resolve(__dirname, '../dist/a.json'),
    resolveLoader: {
        moduleExtensions: ['-loader']
    },
    externals: nodeModules,
    watch: true,
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.es6$/,
                loaders: ['babel-loader']
            },
            {
                test: /\.json?$/,
                loader: 'json'
            }
        ]
    }
};

結果: index.js で何かを変更した後、コードが正常にリロードされたように見えますが、/api/hi API にアクセスすると変更が反映されません。

webpack building...
webpack built 4f5191c370239429fae8 in 378ms
Version: webpack 3.10.0
Time: 378ms
     Asset   Size  Chunks             Chunk Names
backend.js  47 kB       0  [emitted]  main
webpack: Compiled successfully.
webpack: Compiling...
webpack building...
webpack built 59489ea86a2ccf081fa6 in 30ms
Version: webpack 3.10.0
Time: 30ms
                           Asset      Size  Chunks             Chunk Names
                      backend.js   47.1 kB       0  [emitted]  main
0.4f5191c370239429fae8.hot-update.js   1.84 kB       0  [emitted]  main
4f5191c370239429fae8.hot-update.json  43 bytes          [emitted]
webpack: Compiled successfully.