Plugin Dev Guide

Overview

A plugin is essential an object with some properties or methods like name, apply etc.

exports.name = 'foo'

exports.apply = (api, options) => {
  // ...
}

Properties and Methods

name

  • Type: string
  • Required: true

The plugin name which has no meaningful reason of existence for now.

apply

  • Type: (api: PluginAPI, options: any) => void
  • Required: false

commandInternals

  • Type: CommandInternals

Set the internal config for commands. For example we set the mode to production in the plugin that adds the build command:

exports.commandInternals = {
  build: {
    mode: 'production'
  }
}

The type is:

interface CommandInternals {
  mode?: 'production' | 'development'
  watchPkg?: boolean
}

Plugin API

api.command

  • Type: string

Get the current command.

api.mode

  • Type: string

Get the mode that the bundler is running under.

api.chainWebpack

Using webpack-chain to modify internal webpack config.

api.chainWebpack(config => {
  // `config` is a webpack-chain instance
})

api.configureDevServer

Extending the dev server (Express) instance.

api.configureDevServer(server => {
  server.get('/foo', (req, res) => res.send('foo'))
})

api.resolve

Resolve path from base directory.

api.resolve('foo.js')

api.resolveWebpackConfig

Resolve webpack config object. By calling this method, Poi will create a fresh instance of webpack-chain and run all chainWebpack functions against it.

api.resolveWebpackConfig(opts)

opts is optional here, it will be merged with { type: 'client'} and used as the second argument of each chainWebpack function:

// You can call this multiple times to get multiple webpack configs
const serverConfig = api.resolveWebpackConfig({ type: 'server' })
const clientConfig = api.resolveWebpackConfig()

api.chainWebpack((config, { type } => {
  // now `type` will be `server` or `client`
  if (type === 'server') {
    // Do something to server config
  }
}))

api.runWebpack

Run webpack compiler:

const webpackConfig = api.resolveWebpackConfig()

api.runWebpack(webpackConfig)
  .then(stats => {
    console.log(stats.toString())
  })
Last Updated: 10/27/2018, 3:18:33 PM