Step 8

Webpack Dev Server

The webpack-dev-server is as the name suggests, a development server that will run your Webpack build for you. Basically this library will run yarn dev for you every time you save a file in the project and automatically reload the changes in the browser.

The server is very easy to set up. All you have to do is install the package and then alter the package.json for the dev script to run the server instead of webpack -d directly.

Install the module via yarn and then edit the package.json accordingly:

yarn add --dev webpack-dev-server
// package.json

"scripts": {
-  "dev": "webpack -d",
+  "dev": "webpack-dev-server",
  "build": "webpack -p",
  "lint:all": "eslint app/js/*",
  "lint:fix": "eslint app/js/* --fix"

That's it!

Now run yarn dev (usually in it's own terminal tab, as the server process does not end while active) and you will see an output similar too:

yarn run v1.3.2
$ webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /dist/
webpack: wait until bundle finished: /dist/bundle.js
Hash: 056534b7d130126ce90b
Version: webpack 3.8.1
Time: 2497ms
              Asset     Size  Chunks                    Chunk Names
assets/westeros.jpg  3.37 MB          [emitted]  [big]
          bundle.js  1.07 MB       0  [emitted]  [big]  main
   [2] ./node_modules/react/index.js 190 bytes {0} [built]
  [18] multi (webpack)-dev-server/client?http://localhost:8080 ./app/js/application.js 40 bytes {0} [built]
  [19] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
  [20] ./node_modules/url/url.js 23.3 kB {0} [built]
  [27] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [29] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [30] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  [32] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [37] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [38] (webpack)/hot/log.js 1 kB {0} [optional] [built]
  [39] (webpack)/hot/emitter.js 75 bytes {0} [built]
  [41] ./app/js/application.js 420 bytes {0} [built]
  [45] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
  [46] ./node_modules/react-dom/cjs/react-dom.production.min.js 92.7 kB {0} [built]
  [54] ./app/js/components/App/index.js 352 bytes {0} [built]
    + 49 hidden modules
webpack: Compiled successfully.

Now all you have to do is open http://localhost:8000/ in your browser and you will see the map. You can now try making some changes to the application source files. Try changing the background color from dark to light. Add some texts or other content to the page and see watch how the changes are live reloaded.

When you are done, revert the changes you tested with (to the CSS for example) and move on to step 9.

It will be assumed from now on that the webpack-dev-server is running at all times and our changes are always live reloading.