/react-webpack-hmr-starter

Starter kit for ReactJS with webpack HMR

Primary LanguageJavaScript

About this

This is a starter project for webpack with React hot reload

It uses a dev stack with

  1. webpack module loader as the module bundler
  2. React Hot Loader to hot reload the file changes
  3. ReactJS
  4. Sass for style sheets (CSS with superpowers)

Getting started

Clone this repo

$ git clone <repo URI>

Install dependencies

$ npm install

Launch in watch mode

$ npm run watch

Open browser at http://localhost:8090

See HMR (Hot Module Replacement) in action

with watch mode running open src/scripts/subfolder/hello.jsx in a text editor, modify something and save it. Tada !!!!

See HMR (Hot Module Replacement) in action for styles

open webpack/webpack.config.js in text editor and change

entry: [
    './src/scripts/index.js'
],

to

entry: [
    './src/scripts/index-with-styles.js'
],

and restart npm run watch

open src/styles/includes/body.scss in a text editor, modify the body color and save it. Tada !!!!

Dev & Prod build

$ npm run build:dev
$ npm run build:prod

the below creates a clean dev and prod build with 2 source maps

$ npm run build