replace-webpack-plugin
v0.1.2
Published
replace-webpack-plugin
Downloads
1,603
Maintainers
otelnovReadme
replace-webpack-plugin
Webpack Plugin to replace blocks in HTML.
Install
npm i --save replace-webpack-plugin
To replace html content with provided string, just wrap your content with comment like this:
<!-- replace:[name] -->
blocks you want to replace
<!-- endreplace -->API
- skip
Booleanif true - original content will be left (default false) - entry
Stringoriginal file - output
Stringnew file with replaced data - data
Objectkey-value pair of block identifier and new string - hash
Stringstring that should be replaced by webpack entry hash
Example
//webpack.config.js
var ReplacePlugin = require('replace-webpack-plugin');
var config = {
...
plugins: [
new ReplacePlugin({
skip: process.env.NODE_ENV === 'development',
entry: 'index.html',
hash: '[hash]',
output: '/build/index.html',
data: {
css: '<link type="text/css" rel="stylesheet" href="styles.css">',
js: '<script src="bundle.js"></script>'
}
})
]
...
};
module.exports = config;<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- replace:css -->
<link type="text/css" rel="stylesheet" href="style1.css">
<link type="text/css" rel="stylesheet" href="style2.css">
<link type="text/css" rel="stylesheet" href="style2.css">
<!-- endreplace -->
<title>replace-webpack-plugin</title>
</head>
<body>
<!-- replace:js -->
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
<!-- endreplace -->
<script src="[hash].entry.js"></script>
</body>
</html>result:
<!-- build/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="styles.css">
<title>replace-webpack-plugin</title>
</head>
<body>
<script src="bundle.js"></script>
<script src="e8f4f5aa3f6ce31e1537.entry.js"></script>
</body>
</html>Thanks to @VFK for the regexp