#Browsersync - Webpack + Preact Hot Loader

Installation/Usage:

To try this example, follow these 4 simple steps.

Step 1: Clone this entire repo

$ git clone https://github.com/Browsersync/recipes.git bs-recipes

Step 2: Move into the directory containing this example

$ cd bs-recipes/recipes/webpack.preact-hot-loader

Step 3: Install dependencies

$ npm install

Step 4: Run the example

$ npm start

Additional Info:

To see preact-hot-loader in action, edit js/HelloWorld.jsx

Preview of app.js:

/**
 * Require Browsersync along with webpack and middleware for it
 */
var browserSync          = require('browser-sync').create();
var webpack              = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

/**
 * Require ./webpack.config.js and make a bundler from it
 */
var webpackConfig = require('./webpack.config.dev');
var bundler = webpack(webpackConfig);

/**
 *
 */
browserSync.init({
    server: 'app',
    middleware: [
        webpackDevMiddleware(bundler, {
            // IMPORTANT: dev middleware can't access config, so we should
            // provide publicPath by ourselves
            publicPath: webpackConfig.output.publicPath,

            // pretty colored output
            stats: {colors: true}

            // for other settings see
            // http://webpack.github.io/docs/webpack-dev-middleware.html
        }),

        // bundler should be the same as above
        webpackHotMiddleware(bundler)
    ],
    // no need to watch '*.js' here, webpack will take care of it for us,
    // including full page reloads if HMR won't work
    files: [
        'app/css/*.css',
        'app/*.html'
    ]
});