# webpack-dynamic-public-path

> Webpack dynamic public path plugin.

Latest version **1.0.8** (published 2021-11-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-dynamic-public-path
pnpm add webpack-dynamic-public-path
yarn add webpack-dynamic-public-path
bun add webpack-dynamic-public-path
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2021-11-06 |
| First published | 2018-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Oleksandr Zahorovskyi |
| Maintainers | a.zahorovskyi |
| Keywords | webpack, publicPath, dynamic publicPath |

## Links

- npm: https://www.npmjs.com/package/webpack-dynamic-public-path
- Repository: https://github.com/zahorovskyi/webpack-dynamic-public-path
- Issues: https://github.com/zahorovskyi/webpack-dynamic-public-path/issues
- npm.io page: https://npm.io/package/webpack-dynamic-public-path

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 1.0.8 (latest) — 2021-11-06
- 1.0.7 — 2021-04-15
- 1.0.6 — 2020-10-12
- 1.0.5 — 2019-12-07
- 1.0.4 — 2019-08-05
- 1.0.3 — 2018-11-21
- 1.0.2 — 2018-11-20
- 1.0.1 — 2018-11-20
- 1.0.0 — 2018-11-20

## README

# Dynamic Public Path Plugin

Replace publicPath inside a chunk, or chunks, to a variable.

[![NPM](https://nodei.co/npm/webpack-dynamic-public-path.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/webpack-dynamic-public-path/)

## Usage

> :warning: This plugin is compatible only with webpack 4. If you use webpack 5 - check official guide https://webpack.js.org/guides/public-path/#automatic-publicpath

**webpack.config.js**
```js
const WebpackDynamicPublicPathPlugin = require("webpack-dynamic-public-path");

module.exports = {
    output: {
        publicPath: "publicPathPlaceholder",
    },
    plugins: [
        new WebpackDynamicPublicPathPlugin({
            externalPublicPath: "window.externalPublicPath"
        }),
    ]
}
```

**bundle.js**
```js
// before
__webpack_require__.p = "publicPathPlaceholder";

// after
__webpack_require__.p = window.externalPublicPath;
```

## Options

```ts
interface Options {
    externalPublicPath: string; // JavaScript code, here you can define some variable or condition.
    chunkNames: string[]; // Chunk names in which `publicPath` will be replaced.
}

new WebpackDynamicPublicPathPlugin(options: Options);
```

### `chunkNames`

In case if you have several entries you should define plugin instance for each of them.
Check example.

**webpack.config.js**
```js
const WebpackDynamicPublicPathPlugin = require("webpack-dynamic-public-path");

module.exports = {
    entry: {
        'index': path.resolve(__dirname, 'src', 'index.js'),
        'second-chunk': path.resolve(__dirname, 'src', 'second-chunk.js')
    },
    output: {
        filename: '[name].bundle.js',
        publicPath: "publicPathPlaceholder"
    },
    plugins: [
        new WebpackDynamicPublicPathPlugin({
            externalPublicPath: "window.externalPublicPathForMainChunk",
            chunkNames: ['index']
        }),
        new WebpackDynamicPublicPathPlugin({
            externalPublicPath: '"./"',
            chunkNames: ['second-chunk']
        }),
    ]
}
```

**index.bundle.js**
```js
__webpack_require__.p = window.externalPublicPathForMainChunk;
```

**second-chunk.bundle.js**
```js
__webpack_require__.p = "./";
```

---
_Source: https://npm.io/package/webpack-dynamic-public-path · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._