set-webpack-public-path plugin for webpack
npm install @rushstack/set-webpack-public-path-plugin --save-dev
Mode 1: Using thedocument.currentScript API
This plugin wraps the entire webpack bundle in an immediately executed function expression (IIFE) that sets a variableto the value ofdocument.currentScript and then injects code that extracts the current script's base path fromthesrc attribute when setting the__webpack_public_path__ variable.
This is similar to theoutput.publicPath = 'auto' option, but differs in two important ways:
- It does not contain any fallback logic to look at
<script /> elements - It stores the
document.currentScript value immediately when the bundle is executed, not whenthe runtime is executed. This is important when the bundle's factory function is called by another script, likewhen an AMD output target is produced.
To use the plugin, add it to theplugins array of your Webpack config. For example:
import{SetPublicPathCurrentScriptPlugin}from'@rushstack/set-webpack-public-path-plugin';{plugins:[newSetPublicPathCurrentScriptPlugin()]}This plugin has no options.
Mode 2: Automatic public path detection via regular expression
This simple plugin uses a specified regular expression or the emitted asset name to set the__webpack_public_path__variable. This is useful for scenarios where the Webpack automatic public path detection does not work. For example,when emitting AMD-style assets that are initialized by a callback.
To use the plugin, add it to theplugins array of your Webpack config. For example:
import{SetPublicPathPlugin}from'@rushstack/set-webpack-public-path-plugin';{plugins:[newSetPublicPathPlugin(/* webpackPublicPathOptions */)]}This parameter is an object that takes three properties: a string propertyname, a boolean propertyisTokenized,and a boolean propertyuseAssetName
Thename property is a regular expression string that is applied to all script URLs on the page. The last directoryof the URL that matches the regular expression is used as the public path. For example, if thename propertyis set tomy\-bundle_?[a-zA-Z0-9-_]*\.js and a script's URL ishttps://mycdn.net/files/build_id/assets/my-bundle_10fae182eb.js,the public path will be set tohttps://mycdn.net/files/build_id/assets/.
If theisTokenized parameter is set totrue, the regular expression string inname is treated as a tokenizedstring. The supported tokens are[name] and[hash]. Instances of the[name] substring are replaced with thechunk's name, and instances of the[hash] substring are replaced with the chunk's rendered hash. The nameis regular expression-escaped. For example, if thename property is set to[name]_?[a-zA-Z0-9-_]*\.js,isTokenized is set totrue, and the chunk's name ismy-bundle, and a script's URL ishttps://mycdn.net/files/build_id/assets/my-bundle_10fae182eb.js, the public path will be set tohttps://mycdn.net/files/build_id/assets/.
If theuseAssetName property is set, the plugin will use the Webpack-produced asset name as it would thenameproperty.useAssetName is exclusive toname andisTokenized.
This option is exclusive to other options. If it is set,systemJs,publicPath, andurlPrefix will be ignored.
Check for a variable with name... on the page and use its value as a regular expression against script paths tothe bundle's script. If a valuefoo is passed intoregexVariable, the produced bundle will look for a variablecalledfoo during initialization, and if afoo variable is found, use its value as a regular expression todetect the bundle's script.
For example, if theregexVariable option is set toscriptRegex andscriptName is set to{ name: 'myscript' },consider two cases:
<html><head><script>varscriptRegex=/thescript/i;</script><scriptsrc="theScript.js"></script></head> ...</html>
In this case, because there is ascriptRegex variable defined on the page, the bundle will use its value(/thescript/i) to find the script.
<html><head><scriptsrc="myScript.js"></script></head> ...</html>
In this case, because there is not ascriptRegex variable defined on the page, the bundle will use the valuepassed into thescriptName option to find the script.
getPostProcessScript = (variableName) => { ... }
A function that returns a snippet of code that manipulates the variable with the name that's specified in theparameter. If this parameter isn't provided, no post-processing code is included. The variable must be modifiedin-place - the processed value should not be returned. This is useful when non-entry assets are deployed toa parent directory or subdirectory of the directory to which the entry assets are deployed.
For example, if this parameter is set to this function
getPostProcessScript=(variableName)=>{return`${variableName} =${variableName} + 'assets/';`;};the public path variable will have/assets/ appended to the found path.
Note that the existing value of the variable already ends in a slash (/).
preferLastFoundScript = false
If true, find the last script matching the regexVariable (if it is set). If false, find the first matching script.This can be useful if there are multiple scripts loaded in the DOM that match the regexVariable.
