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.