Как настроить Webpack DevTools workspaces?

Question

[Alesck]

Недавно начал разработку с Webpack.

Раньше компиляция была через ruby (консоль) и через dev tools Chrome Canary, scss/css файл и sourcemap файлы сохранялись и обновлялись локально.
Скрин dev tools Chrome:
prntscr.com/cgxr6z

Вопрос:
Нужен подробный алгоритм действий.
Как сделать, так чтобы dev tools Canary, показывал изменения в scss/js файлах сразу, а не после полной перезагрузки страницы?

Спасибо

Конфиг webpack:

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

var plugins = [];

var production = false;

if (production) {
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  );
}

plugins.push(
  new ExtractTextPlugin(
    path.join(
      '..', 'css', 'theme.css'
    )
  )
);

module.exports = {
  entry: [
    './js/theme.js'
  ],
  output: {
    path: '../assets/js',
    filename: 'theme.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader']
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        "style",
        "css?sourceMap!postcss!sass?sourceMap"
      )
    }, {
      test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
      loader: 'file-loader?name=../css/[hash].[ext]'
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader!postcss-loader"
    }]
  },
  postcss: function() {
    return [require('postcss-flexibility')];
  },
  externals: {
    prestashop: 'prestashop'
  },
  debug: true,
  devtool: 'inline-source-map',
  plugins: plugins,
  resolve: {
    extensions: ['', '.js', '.scss']
  }
};