@livingdocs/fastify-webpack-hmr
v6.0.0
Published
Webpack hot module reloading for Fastify
Downloads
1,622
Readme
@livingdocs/fastify-webpack-hmr
:warning: This project is meant to be used in development environment only.
This is a fork of https://github.com/lependu/fastify-webpack-hmr/ with support for Webpack v5. Under the hood it sets up webpack-dev-middleware and webpack-hot-middleware.
Install
$ npm i --save-dev @livingdocs/fastify-webpack-hmr
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 = require('fastify')()
const HMR = require('@livingdocs/fastify-webpack-hmr')
const webpack = require('webpack')
const webpackConfig = require('path/to/your/webpack/config')
const compiler = webpack(webpackConfig)
fastify.register(HMR, { compiler })
fastify.listen(3000)
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 = require('fastify')()
const HMR = require('@livingdocs/fastify-webpack-hmr')
const { join } = require('path')
const config = join(__dirname, 'path.to.your.webpack.config')
fastify.register(HMR, { config })
fastify.listen(3000)
Or you can directly pass a valid webpack configuration object
.
const fastify = require('fastify')()
const HMR = require('@livingdocs/fastify-webpack-hmr')
const { join } = require('path')
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: [join(__dirname, 'path.to.your.client.file'), hotConf],
output: {
publicPath: '/assets',
filename: 'main.js'
}
}
fastify.register(HMR, { config })
fastify.listen(3000)
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 = require('fastify')()
const HMR = require('@livingdocs/fastify-webpack-hmr')
const { join } = require('path')
const hotConf = 'webpack-hot-middleware/client?path=/__webpack_hmr'
const config = [
{
name: 'mobile',
mode: 'development',
entry: [
join(__dirname, 'example', 'mobile.js'),
`${hotConf}&name=mobile`
],
stats: false,
output: { filename: 'mobile.js', publicPath: '/assets' }
},
{
name: 'desktop',
mode: 'development',
entry: [
join(__dirname, 'example', 'desktop.js'),
`${hotConf}&name=desktop`
],
stats: false,
output: { filename: 'desktop.js', publicPath: '/assets' }
}
]
const webpackDev = { publicPath: '/assets' }
fastify.register(HMR, { config, webpackDev })
fastify.listen(3000)
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.