devDependency modules

To maintain consistency throughout the development of the MERN applications, we will use JavaScript ES6 across the stack. As a consequence, and also to aid the development process, we will use the following additional npm modules to compile and bundle the code and to automatically reload the server and browser app as the code is updated during development:

• Babel modules are needed for converting ES6 and JSX to suitable JavaScript for all browsers. The modules needed to get Babel working are:
  • babel-core
  • babel-loader for transpiling JavaScript files with Webpack
  • babel-preset-env, babel-preset-react, and babel-preset-stage-2 to provide support for React, the latest JS features, and some stage-x features such as declaring class fields that are not currently covered under babel-preset-env

• Webpack modules will help bundle the compiled JavaScript, both for the client-side and server-side code. Modules needed to get Webpack working are:
  • webpack
  • webpack-cli to run Webpack commands
  • webpack-node-externals to ignore external Node module files when bundling in Webpack
  • webpack-dev-middleware to serve the files emitted from Webpack over a connected server during development of the code
  • webpack-hot-middleware to add hot module reloading into an existing server by connecting a browser client to a Webpack server and receiving updates as code changes during development
• nodemon to watch server-side changes during development, so the server can be reloaded to put changes into effect. 
• react-hot-loader for faster development on the client side. Every time a file changes in the React frontend, react-hot-loader enables the browser app to update without re-bundling the whole frontend code.

Although react-hot-loader is meant for aiding development flow, it is safe to install this module as a regular dependency rather than a devDependency. It automatically ensures hot reloading is disabled in production and the footprint is minimal.