webpack-dynamic-public-path

1.0.8 verified Sat Apr 25 auth: no javascript deprecated

Webpack 4 plugin to replace the static publicPath in generated chunks with a JavaScript expression (e.g., a global variable or a hardcoded string). Version 1.0.8 is the latest stable release; no updates for several years. Unlike webpack 5's built-in __webpack_public_path__ or automatic-publicPath, this plugin works with webpack 4 and allows per-chunk assignment of publicPath. It is intended for legacy projects that cannot upgrade to webpack 5.

Common errors

error TypeError: Cannot read property 'tapAsync' of undefined ↓

cause Using the plugin with webpack 5 (or incompatible version) where the hooks API changed.

fix

Downgrade to webpack 4 or switch to webpack 5 native publicPath handling.

error Module not found: Error: Can't resolve 'webpack-dynamic-public-path' ↓

cause Package not installed or import path incorrect (e.g., using ESM import).

fix

Install with 'npm install webpack-dynamic-public-path' and use require('webpack-dynamic-public-path').

Warnings

breaking Plugin only works with webpack 4. Using with webpack 5 will cause undefined behavior or compilation errors. ↓

fix Use webpack 5's built-in __webpack_public_path__ or automatic-publicPath guide (https://webpack.js.org/guides/public-path/#automatic-publicpath).

deprecated Package has not been updated since 2019 and is considered deprecated. No support for future webpack versions. ↓

fix Migrate to webpack 5+ or consider using runtime publicPath mechanism.

gotcha The externalPublicPath option expects a raw JavaScript expression, not a string literal. For a string constant, wrap in quotes like '"./"' (note single quotes inside double quotes). ↓

fix Set externalPublicPath to '"./"' (including single quotes) for a static string, or to a variable reference without quotes.

gotcha If not using chunkNames, publicPath is replaced in ALL chunks. This can break vendor bundles or async chunks if they need a different publicPath. ↓

fix Always specify chunkNames when multiple entries or code splitting is used to avoid unintended replacements.

Install

npm install webpack-dynamic-public-path

yarn add webpack-dynamic-public-path

pnpm add webpack-dynamic-public-path

Imports

WebpackDynamicPublicPathPlugin

wrong

import WebpackDynamicPublicPathPlugin from 'webpack-dynamic-public-path';

correct

const WebpackDynamicPublicPathPlugin = require('webpack-dynamic-public-path');

Package does not ship ESM; CommonJS require is required. Using import may cause errors in Node.js.

Quickstart

Shows a minimal webpack 4 config using the plugin to replace the static publicPath placeholder with a window variable.

// webpack.config.js
const path = require('path');
const WebpackDynamicPublicPathPlugin = require('webpack-dynamic-public-path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'PUBLIC_PATH_PLACEHOLDER',
  },
  plugins: [
    new WebpackDynamicPublicPathPlugin({
      externalPublicPath: 'window.myPublicPath',
    }),
  ],
};