wdp
webpack-dynamic-public-path
npm i webpack-dynamic-public-path
wdp

webpack-dynamic-public-path

Webpack dynamic public path plugin.

by Oleksandr Zahorovskyi

1.0.8 (see all)License:MITTypeScript:Not Found
npm i webpack-dynamic-public-path
Readme

Dynamic Public Path Plugin

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

NPM

Usage

⚠️ 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

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

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

bundle.js

// before
__webpack_require__.p = "publicPathPlaceholder";

// after
__webpack_require__.p = window.externalPublicPath;

Options

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

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

__webpack_require__.p = window.externalPublicPathForMainChunk;

second-chunk.bundle.js

__webpack_require__.p = "./";

Downloads/wk

1.3K

GitHub Stars

11

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

0

OPEN PRs

1
VersionTagPublished
1.0.8
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate