Added Webpack Dev Server to Vanilla JS

[theajr]

Hello @jakoblind

This is to support use case mentioned in #41.

Summary of this PR:

• Added webpack-dev-server start script to Vanilla JS projects.
• Same script is working great for VueJS project as well.
• Added devServer config to Vanilla JS project to serve the correct directory, earlier it was serving the project root, which is shown in below screenshot.

Please review and merge.

[theajr]

@jakoblind The same changes are working for Svelte project as well.
It is refreshing the browser tab on code change, same as their official webpack example behaviour.

You can test once and proceed.

[jakoblind]

Nice! I experimented a bit and found it that we can also pass --content-base as argument to webpack-dev-server instead of putting it in webpack.config.js. I like that solution better because it makes the first impression of the webpack.config.js less scary for newbies.

"start": "webpack-dev-server --hot --mode development --content-base ./dist"

[theajr]

of-course, but most of webpack config can also be done through arguments, we should either go with arguments approach or config file. Having some configuration in scripts and some config in webpack.config.js will confuse the newbie more in my opinion. I personally prefer webpack.config.js.

Let me know if you want me to make changes to handle --content-base though arguments.

[jakoblind]

I see your point. However we already pass in --hot which could be in webpack.config.js. I like that we extract the webpack-dev-server specific config to arguments and keep only config that is used in the production build in webpack.config.js.

[theajr]

@jakoblind Yeah, I agree with this. So we can move development config to arguments and production config to webpack.config.json, which makes more sense instead of having dev and production webpack config files.
We should refactor the existing code in this case.

For now you can merge this, we will refactor after adding rollup support all together. What do you say?