browsersync-webpack-ssi

const reallyWebpack = require('webpack');
const browserSync = require('browser-sync').create();
const webpackDevMiddleware = require('webpack-dev-middleware');
const browsersyncWebpackSsi = require('browsersync-webpack-ssi');
 
gulp.task('serve', () => {
    const webpackConfig = require('./webpack.config.dev.js');
    const compiler = reallyWebpack(webpackConfig);
    // 定义webpack-dev-middleware实体
    const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, {
        publicPath: webpackConfig.output.publicPath,
        noInfo: false,
        stats: {
            colors: true,
            timings: true,
            chunks: false
        }
    });
 
    browserSync.init({
        server: path.join(__dirname, '../src/'),
        middleware: [
            // 中间件中传入webpack-dev-middleware实体，以及ssi配置
            // ssi配置查看：https://github.com/yanni4night/node-ssi
            browsersyncWebpackSsi(webpackDevMiddlewareInstance, {
                baseDir: path.join(__dirname, '../src/'),
                encoding: 'utf-8'
            }),
            webpackDevMiddlewareInstance
        ]
    });
 
    compiler.plugin('done', stats => {
        if (stats.hasErrors() || stats.hasWarnings()) {
            console.log(stats.toString());
            return;
        }
        browserSync.reload();
    });
});