❤
npm
Sign UpSign In

replace-webpack-plugin

0.1.2 • Public • Published

replace-webpack-plugin

npm version

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 Boolean if true - original content will be left (default false)
  • entry String original file
  • output String new file with replaced data
  • data Object key-value pair of block identifier and new string
  • hash String string 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

Readme

Keywords

Package Sidebar

Install

npm i replace-webpack-plugin

Repository

github.com/otelnov/replace-webpack-plugin

Homepage

github.com/otelnov/replace-webpack-plugin

Weekly Downloads

369

Version

0.1.2

License

MIT

Last publish

Collaborators

  • otelnov
Try on RunKit
Report malware