Webpack Browsersync Laravel 5.4

package.json

{
  "scripts": {
    "tdd": "cross-env NODE_ENV=testing node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "cross-env": "^3.2.3",
    "laravel-mix": "0.*"
  },
  "dependencies": {
  }
}

webpack.mix.js

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix is a configuration layer on top of Webpack.
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 | @docs https://laravel.com/docs/5.4/mix
 |
 | To be used in future as a project grows.
 */

/**
 * ===== Require dependencies =====
 */

const mix = require('laravel-mix');

/**
 * ===== Webpack's plugins configuration =====
 */

// mix.options({processCssUrls: false}); // Turn off URL Processing in raw CSS files
// mix.sourceMaps(); // Activate sourceMap for development needs

/**
 *  ===== Webpack's workflow =====
 */

// Copy raw image files to public
mix.copy('resources/assets/images', 'public/assets/images');

// Copy raw fonts files to public
mix.copy('node_modules/bootstrap/fonts', 'public/assets/fonts');
mix.copy('node_modules/font-awesome/fonts', 'public/assets/fonts');

// Compile raw javascript file to public
mix.js([
    'resources/assets/js/bootstrap.js'
], 'public/assets/js/vendor.js');
mix.js('resources/assets/js/app.js', 'public/assets/js/application.js');

mix.copy('resources/assets/js/external', 'public/assets/js/external');

// Compile raw stylesheet file to public
mix.less('resources/assets/less/vendor.less', 'public/assets/css')
    .less('resources/assets/less/template.less', 'public/assets/css');

/* Browser sync with test-driven development */
mix.webpackConfig({
    plugins: [
        new mix.plugins.BrowserSyncPlugin(Object.assign({
            host: 'hyperion.dev',
            port: 8080,
            proxy: process.env.APP_URL,
            open: false,
            files: [{
                match: [
                    'app/**/*.php',
                    'resources/views/**/*.php',
                    'public/mix-manifest.json',
                    'public/assets/css/**/*.css',
                    'public/assets/js/**/*.js'
                ],
                fn: function(event, file) {
                    if (event === 'change') {
                        let bs = require("browser-sync").get('bs-webpack-plugin');
                        bs.reload();
                        if (process.env.NODE_ENV === 'testing') {
                            const exec = require('child_process').exec;
                            exec('php vendor/bin/phpunit', (error, stdout, stderr) => {
                                if (error) {
                                    console.error(`exec error: ${error}`);
                                    return;
                                }
                                console.log(`${stdout}`);
                                console.log(`${stderr}`);
                            })
                        }
                    }
                }
            }]
        }, {name: "bs-webpack-plugin"}))
    ]
});