Skip to content

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

Notifications You must be signed in to change notification settings

cp-ankush/webpack-dev-server

Repository files navigation

webpack-dev-server

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() )

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published