Rexpack is a minimal Express, Webpack, & React boilerplate app that serves an image, adds some styling and some basic functionality, just to show everything working at the most basic level. This project can then be used as a template for other more complex apps.
These are the main technologies we want to employ:
- Express — server
- Webpack 4 — bundling
- Jest — testing
- Babel — ES6+ transpilation
- ESlint — Linting
- Webpack Dev Middleware — Bundle code in memory instead of in a file
- Webpack Hot Middleware — Enables Hot Module Reloading (HMR)
- UglifyJS — uglifies code
- mini-css-extract-plugin — minifies CSS
Webpack Dev Middleware (WDM) watches your source files and runs a Webpack build anytime you hit save on a file. All changes are handled in memory, so no files are writted to the disk. Hot Module Reloading is build on top of Webpack Dev Middleware.
For comparison, you might use something like express.static instead of this middleware in production.
Basically, whenever you save a change to a file, Webpack Dev Middleware creates a new build, and HMR executes the change in the browser without you having to refresh the page manually
html-loader and html-webpack-plugin to copy our index.html file to the dist directory. This plugin will also insert a script tag in the HTML file that imports the main Javascript file.
npm install
npm run dev
npm run prod
npm start