Adding webpack-dev-server

In previous posts we’ve used serve as our server, an alternative is the webpack-dev-server. This will give up live reloading and also built-in compilation so that we don’t need to run the build script.

Simply add the relevant package using

yarn add webpack-dev-server -D

Now add the following to your webpack.config.js, first the requires

const path = require('path');

and now the code for the server

module.exports = {
  // ... other config
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 5000

By default “Live reloading” is enabled and hence, now when we make changes to our code and save them, the browser automatically relaods.

We can now just change our “start” script within package.json to

"start": "webpack-dev-server --config config/webpack.config.js"