sudsy/ko-hot-loader

:fire: Tweak Knockout Components in Real-Time

ko-hot-loader

Webpack Hot-Module Replacement Preprocessor and Runtime for KnockoutJS

Assumptions

• You are using webpack (and the webpack-dev-server)
• You are using babel (>=6)

Usage

1. Add ko-hot-loader/babel to your babel config (e.g. .babelrc)

.babelrc

{
  "plugins": ["ko-hot-loader/babel"]
}

2a. Add HMR Entries and Plugin to your Webpack config and hot: true, publicPath: 'http://localhost:8080/' to your dev server config

webpack.config.js

entry: [
  'webpack/hot/dev-server',
  'webpack-dev-server/client?http://localhost:8080/',
  './app.js'
],
plugins: [
  new webpack.HotModuleReplacementPlugin()
]

const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const config = { entry: ... }
const compiler = webpack(config)

const server = new DevServer(compiler, {
  hot: true,
  publicPath: 'http://localhost:8080/'
})

or

2b. Invoke the dev server cli with --hot

webpack-dev-server --hot --inline --config webpack.config.js

3. Profit 💰