Using Fractal with webpack hotloading

Only been using Fractal for a couple of days but man, I’m so in love. I think this is the best pattern generation tool out there.

I love how bare bones it is compared to the others out there.

So I typically run BrowserSync over the top of an application to give me Sass and JS change injection via Gulp Sass and Webpack. The Sass stuff was easy because it produces a CSS file into a directory but hotloading works a little differently.

This is how I usually integrate webpack with my Browsersync instance. Have tried replacing Browsersync with Fractal instances without much luck, I always get a 404 on my JS.

if(global.production) return

var browserSync       = require('browser-sync')
var gulp              = require('gulp')
var webpack           = require('webpack')
var webpackMultiConfig = require('../lib/webpack-multi-config')
var config            = require('../config')
var pathToUrl         = require('../lib/pathToUrl')

var browserSyncTask = function() {

  var webpackConfig = webpackMultiConfig('development')
  var compiler = webpack(webpackConfig)
  var proxyConfig = config.tasks.browserSync.proxy || null;

  if (typeof(proxyConfig) === 'string') {
    config.tasks.browserSync.proxy = {
      target : proxyConfig
    }
  }

  var server = config.tasks.browserSync.proxy || config.tasks.browserSync.server;

  server.middleware = [
    require('webpack-dev-middleware')(compiler, {
      stats: 'errors-only',
      publicPath: pathToUrl('/', webpackConfig.output.publicPath)
    }),
    require('webpack-hot-middleware')(compiler)
  ]

  browserSync.init(config.tasks.browserSync)
}

gulp.task('browserSync', browserSyncTask)
module.exports = browserSyncTask

Has anyone managed anything similar?

[simondib]

hey @stevieg83 or @johannestroeger have either of you successfully got Webpack’s HMR working with Gulp/Fractal? I’m almost there but each time Webpack recompiles the bundle it’s instead reloading the whole page and therefore losing the HMR instance. Any ideas?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.