text-replace-html-webpack-plugin
This package is intended to be used along with html-webpack-plugin. It can be used to replace text in the html file created by the html-webpack-plugin during the webpack build process. Works only wth webpack@^4
Might be used to import gzipped files (eg. bundle.js.gz) instead of .js (bundle.js) in the index.html generated by HtmlWebpackPlugin.
Installation
Install with npm:
npm install --save-dev text-replace-html-webpack-pluginOptions
You can pass configuration objects in the replacementArray to text-replace-html-webpack-plugin.
Allowed values are as follows
This internally uses String.prototype.replace(). See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace for more info
| Name | Type | Description |
|---|---|---|
regex |
{Regular Expression} |
The Regular Expression to be used to search |
searchString |
{String} |
The string to be search and replaced. If regex is also provided, this will be ignored |
replace |
{String | function} |
Replacement of searchString |
Basic Usage
Add plugin to webpack config plugins. And pass the replacementArray.
const HtmlWebPackPlugin = require("html-webpack-plugin");
var CompressionPlugin = require('compression-webpack-plugin');
const TextReplaceHtmlWebpackPlugin = require('text-replace-html-webpack-plugin');
const path = require('path');
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'index.html'),
filename: "index.html"
});
module.exports = {
mode : 'production',
output: {
path: path.resolve(__dirname, 'output'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
]
},
plugins: [
htmlWebpackPlugin,
new CompressionPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/
}
),
new TextReplaceHtmlWebpackPlugin({ replacementArray : [
{
regex : /abcd/ig,
replace : 'xyz'
},
{
//Will give warning, not error. (As error would have stopped the webpack build)
regex : /js/ig,
searchString : 'def',
replace : (match) => match + '.gz'
},
{
searchString : 'def',
replace : 'aaa'
},
{
//Will give warning, not error. (As error would have stopped the webpack build)
searchString : '/index/ig',
replace : 'newIndex'
}
]
}),
]
};
