@rushstack/set-webpack-public-path-plugin
Advanced tools
This plugin sets the webpack public path at runtime.
npm install @rushstack/set-webpack-public-path-plugin --save-dev
document.currentScript APIThis plugin wraps the entire webpack bundle in an immediately executed function expression (IIFE) that sets a variable
to the value of document.currentScript and then injects code that extracts the current script's base path from
the src attribute when setting the __webpack_public_path__ variable.
This is similar to the output.publicPath = 'auto' option, but differs in two important ways:
<script /> elementsdocument.currentScript value immediately when the bundle is executed, not when
the runtime is executed. This is important when the bundle's factory function is called by another script, like
when an AMD output target is produced.To use the plugin, add it to the plugins array of your Webpack config. For example:
import { SetPublicPathCurrentScriptPlugin } from '@rushstack/set-webpack-public-path-plugin';
{
plugins: [
new SetPublicPathCurrentScriptPlugin()
]
}
This plugin has no options.
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 the plugins array of your Webpack config. For example:
import { SetPublicPathPlugin } from '@rushstack/set-webpack-public-path-plugin';
{
plugins: [
new SetPublicPathPlugin( /* webpackPublicPathOptions */ )
]
}
scriptName = { }This parameter is an object that takes three properties: a string property name, a boolean property isTokenized,
and a boolean property useAssetName
The name property is a regular expression string that is applied to all script URLs on the page. The last directory
of the URL that matches the regular expression is used as the public path. For example, if the name property
is set to my\-bundle_?[a-zA-Z0-9-_]*\.js and a script's URL is https://mycdn.net/files/build_id/assets/my-bundle_10fae182eb.js,
the public path will be set to https://mycdn.net/files/build_id/assets/.
If the isTokenized parameter is set to true, the regular expression string in name is treated as a tokenized
string. The supported tokens are [name] and [hash]. Instances of the [name] substring are replaced with the
chunk's name, and instances of the [hash] substring are replaced with the chunk's rendered hash. The name
is regular expression-escaped. For example, if the name property is set to [name]_?[a-zA-Z0-9-_]*\.js,
isTokenized is set to true, and the chunk's name is my-bundle, and a script's URL is
https://mycdn.net/files/build_id/assets/my-bundle_10fae182eb.js, the public path will be set to
https://mycdn.net/files/build_id/assets/.
If the useAssetName property is set, the plugin will use the Webpack-produced asset name as it would the name
property. useAssetName is exclusive to name and isTokenized.
This option is exclusive to other options. If it is set, systemJs, publicPath, and urlPrefix will be ignored.
regexVariable = '...'Check for a variable with name ... on the page and use its value as a regular expression against script paths to
the bundle's script. If a value foo is passed into regexVariable, the produced bundle will look for a variable
called foo during initialization, and if a foo variable is found, use its value as a regular expression to
detect the bundle's script.
For example, if the regexVariable option is set to scriptRegex and scriptName is set to { name: 'myscript' },
consider two cases:
<html>
<head>
<script>
var scriptRegex = /thescript/i;
</script>
<script src="theScript.js"></script>
</head>
...
</html>
In this case, because there is a scriptRegex variable defined on the page, the bundle will use its value
(/thescript/i) to find the script.
<html>
<head>
<script src="myScript.js"></script>
</head>
...
</html>
In this case, because there is not a scriptRegex variable defined on the page, the bundle will use the value
passed into the scriptName 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 the parameter. If this parameter isn't provided, no post-processing code is included. The variable must be modified in-place - the processed value should not be returned. This is useful when non-entry assets are deployed to a 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 = falseIf 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.
FAQs
This plugin sets the webpack public path at runtime.
The npm package @rushstack/set-webpack-public-path-plugin receives a total of 9,715 weekly downloads. As such, @rushstack/set-webpack-public-path-plugin popularity was classified as popular.
We found that @rushstack/set-webpack-public-path-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.