fastify-webpack-hmr
Inspired by koa-webpack plugin.
Under the hood it sets up webpack-dev-middleware and webpack-hot-middleware.
Install
$ npm i --save-dev fastify-webpack-hmr
Versions
The plugin supports the following Fastify
and Webpack
versions. Please refer to corresponding branch in PR and issues.
version | branch | fastify | webpack | end of support |
---|---|---|---|---|
1.x | 1.x | 1.x | 4.x | EOL |
2.x | 2.x | 2.x | 4.x | TBD |
3.x | master | 3.x | 4.x | TBD |
⚠️ This project is meant to be used in development environment only.
Usage
For a more detailed exampe please check out the example
directory.
The plugin accepts a configuration object, with a following properties:
compiler
{object}
optional
If you pass a custom webpack compiler
instance to the plugin, it will pass that to the middlewares.
Note: if you pass a compiler
option the plugin omits the config
option.
const fastify = const HMR = const webpack = const webpackConfig = const compiler = fastify fastify
config
{string|object}
optional
If you pass this option instead of a compiler
, the plugin tries to set up the webpack compiler and will pass that compiler instance to the middlewares. For the detailed configuration options please check the webpack documentation
.
If config is a string
it has to be a path to a valid webpack configuration file.
const fastify = const HMR = const join = const config = fastify fastify
Or you can directly pass a valid webpack configuration object
.
const fastify = const HMR = const join = const hotConf = 'webpack-hot-middleware/client?path=/__webpack_hmr' const config = mode: 'development' // Prevents webpack warning // Add the webpack-hot-middleware to the entry point array. entry: hotConf output: publicPath: '/assets' filename: 'main.js' fastify fastify
webpackDev
{object}
optional
Additional configuration options which will be passed to webpack-dev-middleware
.
webpackHot
{boolean|object}
optional
You can disable
webpack-hot-middleware if you set this option false
.
If it is an object
it will be passed to webpack-hot-middleware
.
Multi compiler mode
In multi compiler mode you must pass the webpackDev.publicPath
option to the plugin.
Tip: Don't forget to set name parameter when you register
webpack-hot-middleware
in entry array. It makes sure that bundles don't process each other's updates.
const fastify = const HMR = const join = const hotConf = 'webpack-hot-middleware/client?path=/__webpack_hmr' const config = name: 'mobile' mode: 'development' entry: `&name=mobile` stats: false output: filename: 'mobile.js' publicPath: '/assets' name: 'desktop' mode: 'development' entry: `&name=desktop` stats: false output: filename: 'desktop.js' publicPath: '/assets' const webpackDev = publicPath: '/assets' fastify fastify
Reference
This plugin decorates the fastify
instance with webpack
object. The object has the following properties:
compiler
Thewebpack compiler
instance.dev
Thewebpack-dev-middleware
instance.hot
Thewebpack-hot-middleware
instance.
License
Licensed under MIT.