fwh

fastify-webpack-hmr

Webpack hot module reloading for Fastify

Showing:

Popularity

Downloads/wk

312

GitHub Stars

29

Maintenance

Last Commit

1yr ago

Contributors

3

Package

Dependencies

5

Size (min+gzip)

775.0KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

fastify-webpack-hmr

js-standard-style Build Status Known Vulnerabilities Coverage Status npm (scoped) npm

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.

versionbranchfastifywebpackend of support
1.x1.x1.x4.xEOL
2.x2.x2.x4.xTBD
3.xmaster3.x4.xTBD

⚠️ 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 = require('fastify')()
const HMR = require('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('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('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('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:

License

Licensed under MIT.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100