I've been messing around with different features of Webpack, and I'm slowly making sense of things.

Typical console-output:

[WDS] App updated. Recompiling...

[WDS] App hot update...

[HMR] Checking for updates on the server...

[HMR] The following modules couldn't be hot updated: (They would need a full reload!)

[HMR]  - 14

[HMR] Nothing hot updated.

[HMR] App is up to date.

This happens no matter what piece of code gets updated, JS, Stylus, templates etc. Everything goes through transformations (Babel, Stylus, Handlebars), but that shouldn't matter.

I have a GitHub project if anyone wants to view the full source-code: https://github.com/SimenB/webpack-fun. npm install && npm start to run it.

Webpack-config:

'use strict';



var webpack = require('webpack');

var path = require('path');



var ExtractTextPlugin = require('extract-text-webpack-plugin');

var autoprefixer = require('autoprefixer-core');



module.exports = {

  context: path.resolve('./src'),

  output: {

    filename: 'kj-[hash].js'

  },

  recordsOutputPath: path.resolve('./records.json'),

  resolve: {

    alias: {

      'common-assets': path.resolve('src', 'common'),

      noop: path.resolve('src', 'common', 'scripts', 'noop')

    }

  },

  module: {

    loaders: [

      { test: /.json$/, loader: 'json' },

      { test: /.js$/, exclude: /node_modules/, loader: 'babel?optional=runtime' },

      { test: /.styl$/, loader: ExtractTextPlugin.extract('style', 'css!postcss!stylus') },

      { test: /.hbs$/, loader: 'handlebars', query: { inlineRequires: '/images/' } },

      { test: /.png$/, loader: 'url?prefix=img/&limit=5000' },

      { test: /.jpg$/, loader: 'url?prefix=img/&limit=5000' },

      { test: /.woff(2)?$/, loader: 'url?prefix=font/&limit=5000' },

      { test: /.eot$/, loader: 'file?prefix=font/' },

      { test: /.ttf$/, loader: 'file?prefix=font/' },

      { test: /.svg$/, loader: 'file?prefix=font/' }

    ]

  },

  plugins: [

    new ExtractTextPlugin('kj-[contenthash].css'),

    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 20 })

  ],

  postcss: [ autoprefixer({ browsers: [ 'Chrome >= 33', 'IE >= 8' ] }) ]

};

Gulp task

function devServer (project) {

  var webpackConfig = require(path.resolve(CONFIG_FILENAME));

  var webpackCore = webpack.core;



  var webpackOptions = {

    output: {

      path: path.resolve('src', project, 'build')

    },

    debug: true,

    devtool: '#source-map',

    watchDelay: 200,

    entry: [

      'webpack-dev-server/client?http://0.0.0.0:8080',

      'webpack/hot/only-dev-server',

      './' + project + '/scripts/index.js'

    ],

    resolve: {

      alias: {

        'dev-module': 'common-assets/scripts/noop'

      }

    }

  };



  webpackConfig.plugins.push(new webpackCore.HotModuleReplacementPlugin());

  webpackConfig.plugins.push(new webpackCore.NoErrorsPlugin());

  webpackConfig.plugins.push(new HtmlWebpackPlugin({ template: 'src/common/index.html', title: 'KJ' }));



  // Start a webpack-dev-server

  var options = merge(webpackConfig, webpackOptions);



  var compiler = webpackCore(options);



  new WebpackDevServer(compiler, {

    contentBase: webpackOptions.output.path,

    hot: true,

    inline: true,

    proxy: {

      '*': 'http://localhost:7021/' + project + '-webapp'

    }

  }).listen(8080, 'localhost', function (err) {

      if (err) {

        throw new gutil.PluginError('webpack-dev-server', err);

      }

      // Server listening

      gutil.log('[webpack-dev-server]', 'http://localhost:8080/webpack-dev-server/');

    });

}



gulp.task('webpack-dev-server:hpp', function () {

  devServer('hpp');

});