spife-webpack

Minimal dev middleware to integrate spife and webpack.

What does it do?

This is development webpack middleware for spife. It augments the req object with req.assets, which provides a shimmable API for referencing bundled assets and querying the current hash of the bundle. It will load the webpack config at webpack.config.js in the current working directory of the process by default.

The goal is thus:

• In dev mode, use this middleware.
• When you're ready

Installation

npm i @npm/spife-webpack

Then add it to MIDDLEWARE in lib/settings in your project:

// lib/settings.js

module.exports = {
  NODE_ENV: process.env.NODE_ENV,
  DEBUG: process.env.DEBUG,
  METRICS: process.env.METRICS,
  MIDDLEWARE: [
    '@npm/spife/middleware/debug',
    '@npm/spife/middleware/common',
    '@npm/spife/middleware/logging',
    '@npm/spife/middleware/metrics',
    '@npm/spife/middleware/monitor',
    '@npm/spife-dev-webpack'        // <----- like so!
  ],
  NAME: 'with-webpack',
  ROUTER: './main.js',
  PORT: 8124,
}

API

This middleware augments requests with an asset manager:

function myView (req, context) {
  const assets = req.assets.named('my-asset-name') // this will return a list of urls suitable for embedding in HTML

  const onlyJS = req.assets.named('my-asset-name', '.js') // if you want to only include JS assets!

  // you can also access the hash of the current build!
  req.assets.hash
}