Add auto-rebuild feature for webpack project

[nizniz187]

Followed with #141 , now we need to introduce webpack-dev-server maybe for auto-rebuilding on development.

[nizniz187]

On the root directory, type the following command to start the webpack-dev-server:

npm run start

The server will be run on localhost:9000. Press Ctrl + C to stop the webpack-dev-server.

Important: the webpack-dev-server doesn't write file to the disk. So for our case which the bundle file is needed to be pushed to git, we shall build manually before push so that the updated bundle js can be generated for the official website.

Due to the complexity of HMR, we only enable the auto-rebuild feature, ie. you still need to refresh the page manually to see the updated change. But you can combine with other live server tool to fulfill the need of hot-reload feature, if you like.

[nizniz187]

@cwpeng Please review.

[nizniz187]

@cwpeng Please review agian.

The auto re-bundled problem is solved by adding writeToDisk setting to webpack config. This setting seemed to be changed from devServer.writeToDisk to devServer.devMiddleware.writeToDisk without further detailed description. But anyway IT WORKS! And magically the hot reload function takes effect too with no more settings changed!! And with the function filter for the writeToDisk setting like filePath => !/.hot-update./ .test(filePath), we can further avoid hot-update files being written to the disk and save the clean step!

Now we don't need to manually build the bundle for pushing the updated file to GitHub. Just run the webpack dev server, update the code, check it right on the webpage, then we can just do the git push safe and sound. The world is saved and everyone is happy ever after, without any curiosity to know WHY :p.

(You can try to figure it out if you want: https://webpack.js.org/configuration/dev-server/#devserverdevmiddleware)

[cwpeng]

Thank for saving my world. XDDDD