Find file History
Latest commit 460c995 Apr 10, 2017
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
app Adding webpack.typescript recipe Feb 16, 2016
src cleanup webpack.typscript recipe Feb 17, 2016
app.js Apply prettier Apr 10, 2017
desc.md cleanup webpack.typscript recipe Feb 17, 2016
package.json Adding webpack.typescript recipe Feb 16, 2016
readme.md cleanup webpack.typscript recipe Feb 17, 2016
tsconfig.json Adding webpack.typescript recipe Feb 16, 2016
webpack.config.js Apply prettier Apr 10, 2017

readme.md

#Browsersync - Webpack + TypeScript

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.typescript

Step 3: Install dependencies

$ npm install

Step 4: Run the example

$ npm start

Additional Info:

See src/main.ts

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 stripAnsi            = require('strip-ansi');

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

/**
 * Reload all devices when bundle is complete
 * or send a fullscreen error message to the browser instead
 */
bundler.plugin('done', function (stats) {
    if (stats.hasErrors() || stats.hasWarnings()) {
        return browserSync.sockets.emit('fullscreen:message', {
            title: "Webpack Error:",
            body:  stripAnsi(stats.toString()),
            timeout: 100000
        });
    }
    browserSync.reload();
});

/**
 * Run Browsersync and use middleware for Hot Module Replacement
 */
browserSync.init({
    server: 'app',
    open: false,
    logFileChanges: false,
    middleware: [
        webpackDevMiddleware(bundler, {
            publicPath: webpackConfig.output.publicPath,
            stats: {colors: true}
        })
    ],
    plugins: ['bs-fullscreen-message'],
    files: [
        'app/css/*.css',
        'app/*.html'
    ]
});