The Blog

Webpack Dev Server – Watch Files

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:

# check the version of a node package in bash, in this case, check on webpack
[user]$ npm list webpack
es6@1.0.0 /home/my/software/site/
└── webpack@3.10.0 

I’m using a package.json configuration file in the root of my project:

{
  "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:

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:

# 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:

"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.

Spread the love

No comments yet.

Leave a Comment

Remember to play nicely folks, nobody likes a troll.

You must be logged in to post a comment.