webpack

Install

pnpm add -D webpack-plugin-quello

Configure

import HtmlWebpackPlugin from 'html-webpack-plugin'
import QuelloWebpackPlugin from 'webpack-plugin-quello'

export default {
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new QuelloWebpackPlugin(),
  ],
  devServer: { port: 3000 },
}

It takes the same options as the Vite plugin.

How it attaches

Two hooks, and it needs both:

• the script tag goes in through html-webpack-plugin's alterAssetTagGroups;
• the picks endpoint goes in through webpack-dev-server's setupMiddlewares.

Without html-webpack-plugin

If you write your own HTML there is no generated document to add to. Ask the plugin for the tag and paste it into your template:

const quello = new QuelloWebpackPlugin()
console.log(quello.scriptTag())
// <script defer src="/__quello/client.js" data-quello-endpoint="/__quello/picks" …></script>

Production

The plugin returns early when mode === 'production', whatever else the config says. There is no way to accidentally ship it.

What a pick will know

Whatever your framework exposes — the plugin only decides how quello gets in, never what it can read. A Vue app on webpack reports Vue components exactly as it would on Vite. See compatibility.