4

I am new to Node JS. I am working on creating a Backend API server with hot reloading by using webpack-hot-middleware. I try to use webpack-dev-middleware to load the server script (index.js) to the memory and execute that javascrip t file.

Here is my code: link

I find that my code can do the hot reloading successfully, but I fail to load the server script (index.js) and boot my API server. For some reasons, I want to use webpack-dev-middleware rather than webpack dev server.

It is my file strucuture:

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

I found tons of tutorials about how to do that on the front end or the backend server that render the HTML, but I need to start my index.js.

So, my question is how to load the js file generated from webpack-dev-middleware and start that js file.

The below is what I try:

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

In 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'
            }
        ]
    }
};

Result: code seems to be reloaded successfully after I change something on index.js, but I fail to see the change when I access /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.
Danny Pang V
  • 140
  • 1
  • 1
  • 11

0 Answers0