Friday, June 10, 2016

WEBPACK - what is it Hot Module Reload, flags, process.env etc

Here is a good explanation what is Hot Module Reload:
http://matthewlehner.net/react-hot-module-replacement-with-webpack/

If you’re interested in a more in depth explanation of how it works, check out the answer to What exactly is Hot Module Replacement in Webpack on Stackoverflow.

http://webpack.github.io/docs/hot-module-replacement-with-webpack.html

http://stackoverflow.com/questions/24581873/what-exactly-is-hot-module-replacement-in-webpack#answer-24587740

webpack-dev-server --progress --inline
  • --progress displays the compilation progress when building
  • --inline adds webpacks automatic refresh code inline with the compile application
--profile 
--colors 
--watch 
--display-error-details 
--display-cached 
--content-base /src

Profiling

If you wish to have a more in-depth idea of what is taking how long, you can use the --profile switch. This will cause WebPack to display more detailed timing informations. Combine this with the switches above to get a very detailed message and information set, which will contain the timings of your modules.

The timing "keys"

  • factory: The time it took to build the module information.
  • building: The time that was spent building the module (loaders, for example).
  • dependencies: The time that was spent gathering and connecting the dependencies

Process.env:
Webpack configuration can be a CommonJS module and can pick up on environment variables via Node's process.env object.

AMD
https://webpack.github.io/docs/amd.html