I’ve been learning Webpack and the Webpack-dev-server environment in Node. I have Webpack version 3.10.0 and Webpack-dev-server version 2.11.1. Here’s a quick example of how to get a package version using NPM:
“`sh
# check the version of a node package in bash, in this case, check on webpack
[user]$ npm list webpack
[email protected] /home/my/software/site/
└── [email protected]
“`
I’m using a package.json configuration file in the root of my project:
“`json
{
“name”: “Test”,
“version”: “1.0.0”,
“description”: “Test Application”,
“main”: “index.js”,
“scripts”: {
“build”: “webpack”,
“start”: “webpack-dev-server”
},
“babel”:
{
“presets”: [“es2015”]
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“babel-core”: “^6.26.0”,
“babel-loader”: “^7.1.2”,
“babel-polyfill”: “^6.26.0”,
“babel-preset-es2015”: “^6.24.1”,
“webpack”: “^3.10.0”,
“webpack-dev-server”: “^2.11.1”
}
}
“`
Along with a webpack.config.js file:
“`json
module.exports = {
entry: [‘./app/index.js’],
output: {
path: __dirname + ‘/build’,
filename: ‘bundle.js’
},
module: {
loaders: [
{
loader: ‘babel-loader’,
test: /\.js$/,
exclude: /node_modules/
}
]
},
devServer: {
port: 3000,
contentBase: __dirname + ‘/build’,
inline: true
}
}
“`
To compile and run my code, I was using the “start” command like this:
“`sh
# this will use the start command that is configured in the config file to
# run the webpack-dev-server command that resides in the node_modules/.bin
# folder in the project directory.
[user]$ npm run start
“`
At this point, I was able to load everything in my browser, running at localhost:3000 url. What I wanted was for the browser to refresh whenever I made a change to the underlying code. From what I read, the `inline:true` setting is supposed to take care of that. For me, it wasn’t. A code change didn’t do anything in the browser until I refreshed it manually. It didn’t even seem to be compiling the code at all.
I did try using `webpack –watch` in another terminal after reading up on the problem. Still, no luck. I didn’t spend a ton of time trying to make it work, and looked for alternatives.
Solution
Finally, I came across a thread with the solution that worked for me. when running the `webpack-dev-server` command, I had to add the `–watch-poll` argument. So, my final “scripts” portion of package.json ended up looking like this:
“`json
“scripts”: {
“build”: “webpack”,
“start”: “webpack-dev-server –watch-poll”
}
“`
This caused my browser to refresh after changes to any of my code. I’m sure this isn’t going to be my desired behavior all the time, but works for the needs of the moment.
