Base Href Webpack Plugin

3.0.1 verified Sat Apr 25 auth: no javascript

Webpack plugin (v3.0.1, stable) that extends html-webpack-plugin to programmatically insert or update the <base href="" /> tag in the HTML head. Active release with support for Webpack 5 (v3.x), Webpack 4 (v2.x), and Webpack 3 (v1.x). Key differentiators: automatic base href injection without manual template editing; leaves template untouched if option omitted; ships TypeScript types. Alternatives typically require manual HTML template modification.

Common errors

error TypeError: Cannot destructure property 'BaseHrefWebpackPlugin' of 'require(...)' as it is undefined. ↓

cause Using default import or require incorrectly.

fix

Use const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin'); (named import)

error Error: Cannot find module 'html-webpack-plugin' ↓

cause html-webpack-plugin is a peer dependency and not installed.

fix

Run npm install --save-dev html-webpack-plugin

error Error: webpack.version is not defined - plugin requires webpack 5 ↓

cause Using plugin v3 with Webpack 4 or earlier.

fix

Use v2.x for Webpack 4 or upgrade to Webpack 5

Warnings

breaking Version 3.x requires Webpack 5 and html-webpack-plugin ^4.0.0 ↓

fix Upgrade webpack to ^5.0.0 and html-webpack-plugin to ^4.0.0

breaking Version 2.x requires Webpack 4 ↓

fix Use v3.x for Webpack 5 or stay on v2.x for Webpack 4

gotcha If baseHref option is not provided, the plugin silently does nothing - does not warn ↓

fix Always provide baseHref option to ensure the tag is inserted

Install

npm install base-href-webpack-plugin

yarn add base-href-webpack-plugin

pnpm add base-href-webpack-plugin

Imports

BaseHrefWebpackPlugin
wrong
```
const BaseHrefWebpackPlugin = require('base-href-webpack-plugin');
```
correct
```
const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
```
Named export, not default. CommonJS require style. For ESM: import { BaseHrefWebpackPlugin } from 'base-href-webpack-plugin';

BaseHrefWebpackPlugin (default)

wrong

import { BaseHrefWebpackPlugin } from 'base-href-webpack-plugin';

correct

import BaseHrefWebpackPlugin from 'base-href-webpack-plugin';

Plugin also has a default export. Named import is recommended for clarity.

BaseHrefWebpackPluginConfig
```
type BaseHrefWebpackPluginConfig = { baseHref: string }
```
TypeScript type for options object. Exported from package.

Quickstart

Shows how to add BaseHrefWebpackPlugin to webpack config, requiring both html-webpack-plugin and the plugin itself.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new BaseHrefWebpackPlugin({ baseHref: '/' })
  ]
};