webpack-dev-server basic implementation and points to notice.

install the webpack and other dependencies on your system. command to run: webpack-dev-server server-url is localhost:8080/webpack-dev-server or localhost:8080

------------------------------------------BASIC configuration-----------------------------------------------

• "webpack" is command to run "webpack.config.js" file.
• if "webpack.config.js" is not present in the directory, then we need to mention actions in command itself. eg: webpack ./app.js bundle.js (it will create bundle.js( write in disk, we can see in the directory) from app.js)
• But with "webpack" we can only do the actions, need to open the root file(index.html) manually
• use webpack --watch to continuously check the changes in the files.
• or use "watch: true" in config file.
• "webpack-dev-server" command create server for you and read index.html file automatically.
• "webpack-dev-server" command run the configuration in "webpack.config.js".
• it is checking for the changes in the file by default, no need to give "watch: true" or "--watch" in "webpack.config.js" file.
• it is not writting output file(bundle.js) to the disk, rather reading from the memory.
• so, it won't create "bundle.js" file to the disk, we still need to run webpack to write it on the disk.
• server-url is localhost:8080/webpack-dev-server, here "app is ready" status is displayed at the top of the page and hot-load is enabled(on changing anything, it will be reflected automatically)
• to disable hot-reload and "app is ready" status, remove "/webpack-dev-server" from url.
• to keep hot-reload enable and remove only "app is ready" status, run command "webpack-dev-server --inline"
• load multiple files with webpack by giving array of files in entry property in "webpack.config.js" file.

------------------------------------------configuration one level up-----------------------------------------------

Webpack loaders and preloaders:

• Loaders allows you to preprocess the files as you require() or load them.
• Loaders are kind of like "tasks" in other build tools.
• Loaders can transform files from one language to another ("coffeeScript to js" or "inline images as data urls").
• "npm init" to create package.json file.

-----------------------------------------Production configuration----------------------------------------------------

• in production, run the "webpack-dev-server" with flag -p(webpack-dev-server -p) to minify the code.(it will run the uglify.js)
• strip-loader is a loader to strip the arbitary function from the production code.( like console.log() )