Have ideas to improve npm?Join in the discussion! »

    fastify-webpack-hmr

    3.0.0 • Public • Published

    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.

    Install

    npm i fastify-webpack-hmr

    DownloadsWeekly Downloads

    657

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    22.3 kB

    Total Files

    26

    Last publish

    Collaborators

    • avatar