Note: This repo is old, and uses Webpack 1.x. Most of the stuff here probably isn't relevant any more.

Webpack + Browsersync + Proxy Example

This example project demonstrates using Webpack and Browsersync with an app served by a separate server.

Your external server handles everything as usual - Browsersync merely proxies that server using Webpack's Dev and HMR (Hot Module Replacement) middleware in order to serve assets and handle browser injections and reloads.

This example project is based largely on the Browsersync - Webpack + Monkey Hot Loader recipe from Browsersync, as well as the great e-book SurviveJS - Webpack and React.

Installation/Usage:

To try this example, follow these 5 easy steps:

Step 1: Clone this repo

$ git clone https://github.com/shanecav/webpack-browsersync-proxy.git webpack-browsersync-proxy

Step 2: Move into the directory you cloned to

$ cd webpack-browsersync-proxy

Step 3: Install dependencies

$ npm install

Step 4: Set up your external server to serve this app. Make sure it serves the /public directory.

Go into /app.js and set the LOCAL_HOST variable (line 15) to whatever URL your external server is serving the app at.

Step 5: Run the example

$ npm start

Additional Info:

This example project also includes/implements the following:

• sass-loader
• babel-loader
• monkey-hot-loader for hot-replacing regular javascript modules
• extract-text-webpack-plugin for extracting styles into a separate CSS file outside of the main bundle.js (only when building for production)
• webpack-merge for separate webpack configurations based on the npm command run

To see monkey-hot-loader in action, edit top-level functions (inc, dec) inside the /app/js/counter.js file.

Building for production

You can run:

$ npm run build

to build all of the assets for production.