webpack-dynamic-public-path
v1.0.8
Published
Webpack dynamic public path plugin.
Downloads
22,435
Maintainers
Readme
Dynamic Public Path Plugin
Replace publicPath inside a chunk, or chunks, to a variable.
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
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 = "./";