Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

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 = 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.