NODE.JS: Why can't I get live reload with web pack? - node.js

Question

IM SO FRUSTRATED RIGHT NOW, ive spent a whole day trying to get webpack to work, but every tutorial or documentation is terrible..it shouldnt be this hard..whats the point of these packages if they actually make you spend more time trying to configure them then saving time.
I just want the live reload to work. I've tried the inline method, iframe, hot module, the middleware with express. None of it works...Im using Node.js on atom, with safari browser.
I want it to work with express.
Can someone point me to a good tutorial...or explain step by step very simply..
Need help. please. no one every replies on these things! Thank you
GITHUB REPO LINK
webpack.config.js
const nodeExternals = require('webpack-node-externals');
module.exports =
{
entry: './app.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js',
},
devServer: {
port: 8000,
open: true,
inline: true
},
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}
]
}
}
package.json
{
"name": "clinic8beauty",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"b": "webpack",
"s": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"es2015"
]
},
"author": "Kosta Pontidas",
"license": "ISC",
"dependencies": {
"body-parser": "^1.17.1",
"events": "^1.1.1",
"express": "^4.15.2",
"jquery": "^3.2.1",
"pug": "^2.0.0-beta.12",
"twilio": "^2.11.1",
"validator": "^7.0.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"node-sass": "^4.5.2",
"pug-html-loader": "^1.1.4",
"sass-loader": "^6.0.3",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4",
"webpack-hot-middleware": "^2.18.0",
"webpack-node-externals": "^1.5.4"
}
}
app.js requires
const express = require('express'),
app = express(),
events = require('events'),
eventEmitter = new events.EventEmitter(),
bodyParser = require('body-parser'),
validator = require('validator'),
client = require('twilio')('AC3cdbdc7ecb720d5521f41243450343e8',
'8f76c52d839dc25aa17ddc72b3b9d781');

Answer 1

You have target node in your config change it to web or remove it as default is web. It should fix your problem.

Answer 2

Can you try the following?
const nodeExternals = require('webpack-node-externals');
const path = require('webpack'); // <== added
module.exports =
{
entry: './app.js',
// target: 'node', <== deleted
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, 'dist'), //<== added
filename: 'app.bundle.js'
},
devServer: {
port: 8000,
open: true,
inline: true,
contentBase: [path.resolve(__dirname, 'dist')/* add other directories if needed */]
},
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}
]
}
}
And run webpack-dev-server --progress instead of just webpack to start the server

Answer 3

Why not use nodemon globally and webpack to compile