react-webpack-tutorial

An ejected create-react-app application for demonstrating more advanced webpack configuration.

Explanation in this blog: Caching Assets Long Term with Webpack

Installation

npm i

Tutorial Outline

Each step is tagged so that it's easy to check out the tutorial at any step by using:

git checkout [TAG]

To see the changes made between tags:

git diff [TAG_1]..[TAG_2]

Here are the tags in chronological order:

react-create-app-init

• The default app generated by react-create-app

react-create-app-eject

• The app after ejecting react-create-app: npm run eject

express

• Adds a simple Express server for serving the production build.

vendor-bundle

• Seperate app and vendor assets using Webpack CommonsChunkPlugin.

long-term-cache

• Use CommonsChunkPlugin to generate a seperate manifest.js including the Webpack runtime as well as the chunk mapping.
• Configure html-webpack-plugin to order assets correctly in the production build.

inline-manifest

• Use inline-manifest-webpack-plugin to inline manifest.js in the html.

deterministic-modules

• Use Webpack NamedModulesPlugin to use deterministic module names instead of non-deterministic integer ids.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

npm start:prod

Runs the app in production mode. The build step is run automatically before starting the app via a npm pre command.
Open http://localhost:9000 to view in the browser.