https://github.com/sibiraj-s/replace-asset-name-webpack-plugin
Webpack Plugin to replace blocks with asset name matching given regex or string
https://github.com/sibiraj-s/replace-asset-name-webpack-plugin
replace-asset-names webpac-replace webpack webpack-plugin
Last synced: 3 months ago
JSON representation
Webpack Plugin to replace blocks with asset name matching given regex or string
- Host: GitHub
- URL: https://github.com/sibiraj-s/replace-asset-name-webpack-plugin
- Owner: sibiraj-s
- License: mit
- Created: 2021-02-14T13:27:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-15T11:41:50.000Z (10 months ago)
- Last Synced: 2024-12-23T08:05:37.951Z (7 months ago)
- Topics: replace-asset-names, webpac-replace, webpack, webpack-plugin
- Language: JavaScript
- Homepage: https://npm.im/replace-asset-name-webpack-plugin
- Size: 699 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# replace-asset-name-webpack-plugin
> Replace blocks with asset name matching given regex or string
[](https://github.com/sibiraj-s/replace-asset-name-webpack-plugin/actions)
[](https://github.com/sibiraj-s/replace-asset-name-webpack-plugin)
[](https://npmjs.com/replace-asset-name-webpack-plugin)
[](https://npmjs.com/replace-asset-name-webpack-plugin)
[](https://webpack.js.org/)
## Getting Started
### Installation
```bash
npm i -D replace-asset-name-webpack-plugin
# or
yarn add replace-asset-name-webpack-plugin --dev
```
### Usage
```js
// webpack.config.js
const ReplaceAssetNamePlugin = require('replace-asset-name-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
main: 'src/index.js',
app: 'src/app.js',
},
output: {
filename: 'js/[name]-[contenthash].js',
},
plugins: [
new ReplaceAssetNamePlugin({
asset: /main(-.*)?.js$/,
rules: [
{
search: '{APP_ENTRY_REF}',
replace: /app(-.*)?.js$/,
},
],
}),
],
};
```
This will replace the occurrence of `{APP_ENTRY_REF}` in `main.js` with the output chunk name of the `app` entry.
In development mode. If you use `contenthash` for testing. Make sure to enable [realContentHash](https://webpack.js.org/configuration/optimization/#optimizationrealcontenthash) so that chunk names will be updated after replace. This is enabled by default in production mode.
### Options
#### asset
Include all assets that pass test assertion
Type: `String|RegExp|Array`.
#### rules
Array of rules to search and replace assets
```js
new ReplaceAssetNamePlugin({
asset: /main(-.*)?.js$/,
rules: [
{
search: '{APP_ENTRY_REF}',
replace: /app(-.*)?.js$/,
},
],
});
```
**search**
Type: `String|RegExp`
Replace the occurrence of given string or regex with the asset name
**replace**
Type: `String|RegExp`.
Name of the asset to be replaced with the matching search term
### Related Plugins
- [copy-asset-in-memory-webpack-plugin](https://github.com/sibiraj-s/copy-asset-in-memory-webpack-plugin)