├── .prettierrc
├── LICENSE
├── README.md
├── index.js
└── package.json


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 100,
3 |   "semi": false,
4 |   "singleQuote": true,
5 |   "tabWidth": 2,
6 |   "trailingComma": "none",
7 |   "arrowParens": "avoid"
8 | }
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 nathanie
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # [html-replace-webpack-plugin]
  2 | 
  3 | A Webpack plugin for replace HTML contents with custom pattern string or regex.
  4 | 
  5 | ## Examples
  6 | 
  7 | https://github.com/iminif/html-replace-webpack-plugin-howto
  8 | 
  9 | ## :green_heart: Special Note! :eyes:
 10 | 
 11 | This plugin works together with [html-webpack-plugin]!
 12 | 
 13 | ## Usage
 14 | 
 15 | First of all, you need both `html-webpack-plugin` and `html-replace-webpack-plugin`.
 16 | 
 17 | ```shell
 18 | npm i -D html-webpack-plugin html-replace-webpack-plugin
 19 | ```
 20 | 
 21 | Then, add it to your `webpack.config.js` file:
 22 | 
 23 | ### In your `webpack.config.js` file:
 24 | 
 25 | > :green_heart: Please ensure that `html-webpack-plugin` was placed before `html-replace-webpack-plugin` in your Webpack config if you were working with Webpack 4.x!
 26 | 
 27 | ```javascript
 28 | var webpack = require('webpack')
 29 | var HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
 30 | 
 31 | // file types & file links
 32 | const resource = {
 33 |   js: { bootstrap: '//cdn/bootstrap/bootstrap.min.js' },
 34 |   css: { bootstrap: '//cdn/bootstrap/bootstrap.min.css' },
 35 |   img: { 'the-girl': '//cdn/img/the-girl.jpg' }
 36 | }
 37 | 
 38 | const tpl = {
 39 |   img: '<img src="%s">',
 40 |   css: '<link rel="stylesheet" type="text/css" href="%s">',
 41 |   js: '<script type="text/javascript" src="%s"></script>'
 42 | }
 43 | 
 44 | module.exports = {
 45 |   // Definition for Webpack plugins
 46 |   plugin: [
 47 |     new HtmlWebpackPlugin({
 48 |       /* configs */
 49 |     }),
 50 |     // Replace html contents with string or regex patterns
 51 |     new HtmlReplaceWebpackPlugin([
 52 |       {
 53 |         pattern: 'foo',
 54 |         replacement: '`foo` has been replaced with `bar`'
 55 |       },
 56 |       {
 57 |         pattern: '@@title',
 58 |         replacement: 'html replace webpack plugin'
 59 |       },
 60 |             {
 61 |         pattern: /<p>(.+?)<\/p>/g, // /g => replace all
 62 |         replacement: '<div>$1</div>'
 63 |       },
 64 |       {
 65 |         pattern: /(<!--\s*|@@)(css|js|img):([\w-\/]+)(\s*-->)?/g,
 66 |         replacement: function(match, $1, type, file, $4, index, input) {
 67 |           // those formal parameters could be:
 68 |           // match: <-- css:bootstrap-->
 69 |           // type: css
 70 |           // file: bootstrap
 71 |           // Then fetch css link from some resource object
 72 |           // var url = resources['css']['bootstrap']
 73 | 
 74 |           var url = resource[type][file]
 75 | 
 76 |           // $1==='@@' <--EQ--> $4===undefined
 77 |           return $4 == undefined ? url : tpl[type].replace('%s', url)
 78 |         }
 79 |       }
 80 |     ])
 81 |   ]
 82 | }
 83 | ```
 84 | 
 85 | #### In your `src/index.html` file:
 86 | 
 87 | ```html
 88 | <!DOCTYPE html>
 89 | <html lang="en">
 90 |     <head>
 91 |       <meta charset="UTF-8">
 92 |       <title>@@title</title>
 93 |       <!-- css:bootstrap -->
 94 |     </head>
 95 |     <body>
 96 |       <div>foo</div>
 97 |       <p>I wanna be in a div</p>
 98 |       <!-- js:bootstrap -->
 99 |     </body>
100 | </html>
101 | ```
102 | 
103 | #### After replacing, in the `dist/index.html` file:
104 | 
105 | ```html
106 | <html lang="en">
107 |     <head>
108 |       <meta charset="UTF-8">
109 |       <title>html replace webpack plugin</title>
110 |       <link rel="stylesheet" type="text/css" href="//cdn/bootstrap/bootstrap.min.css">
111 |     </head>
112 |     <body>
113 |       <div>`foo` has been replaced with `bar`</div>
114 |       <div>I wanna be in a div</div>
115 |       <script type="text/javascript" src="//cdn/bootstrap/bootstrap.min.js"></script>
116 |     </body>
117 | </html>
118 | ```
119 | 
120 | ## API
121 | 
122 | html-replace-webpack-plugin can be called with an objects array or an object.
123 | 
124 | ### Options for `html-replace-webpack-plugin`
125 | 
126 | new HtmlReplaceWebpackPlugin([obj1[, obj2[, obj3[, ...[, objN]]]]] | obj)
127 | 
128 | #### [obj1[, obj2[, obj3[, ...[, objN]]]]] | obj
129 | 
130 | Type: `Objects Array` | `Object`
131 | 
132 | #### obj1, obj2, obj3, ..., objN | obj
133 | 
134 | Type: `Object`
135 | 
136 | #### obj.pattern
137 | 
138 | Type: `String` | `RegExp`
139 | 
140 | string or regex pattern for matching HTML content. See the [MDN documentation for RegExp] for details.
141 | 
142 | #### obj.replacement
143 | 
144 | Type: `String` | `Function`
145 | 
146 | string with which the matching string be replaced, or function which returns a string for replacing. See the [MDN documentation for String.replace] for details.
147 | 
148 | [html-webpack-plugin]: https://www.npmjs.com/package/html-webpack-plugin
149 | [html-replace-webpack-plugin]: https://www.npmjs.com/package/html-replace-webpack-plugin
150 | [mdn documentation for regexp]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
151 | [mdn documentation for string.replace]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter
152 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | function HtmlReplaceWebpackPlugin(options) {
 2 |   options = Array.isArray(options) ? options : [options]
 3 | 
 4 |   options.forEach(option => {
 5 |     if (typeof option.pattern == 'undefined' || typeof option.replacement == 'undefined') {
 6 |       throw new Error('Both `pattern` and `replacement` options must be defined!')
 7 |     }
 8 |   })
 9 | 
10 |   this.replace = function (htmlPluginData, callback) {
11 |     options.forEach(option => {
12 |       if (typeof option.replacement === 'function') {
13 |         try {
14 |           new RegExp(option.pattern)
15 |         } catch (e) {
16 |           throw new Error('Invalid `pattern` option provided, it must be a valid regex.')
17 |         }
18 | 
19 |         htmlPluginData.html = htmlPluginData.html.replace(option.pattern, option.replacement)
20 |       } else {
21 |         if (option.pattern instanceof RegExp)
22 |           htmlPluginData.html = htmlPluginData.html.replace(option.pattern, option.replacement)
23 |         else
24 |           htmlPluginData.html = htmlPluginData.html.split(option.pattern).join(option.replacement)
25 |       }
26 |     })
27 | 
28 |     callback(null, htmlPluginData)
29 |   }
30 | }
31 | 
32 | HtmlReplaceWebpackPlugin.prototype.apply = function (compiler) {
33 |   if (compiler.hooks) {
34 |     compiler.hooks.compilation.tap('HtmlReplaceWebpackPlugin', compilation => {
35 |       if (compilation.hooks.htmlWebpackPluginAfterHtmlProcessing) {
36 |         compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(
37 |           'HtmlReplaceWebpackPlugin',
38 |           this.replace
39 |         )
40 |       } else {
41 |         var HtmlWebpackPlugin = require('html-webpack-plugin')
42 | 
43 |         if (!HtmlWebpackPlugin) {
44 |           throw new Error(
45 |             'Please ensure that `html-webpack-plugin` was placed before `html-replace-webpack-plugin` in your Webpack config if you were working with Webpack 4.x!'
46 |           )
47 |         }
48 | 
49 |         HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
50 |           'HtmlReplaceWebpackPlugin',
51 |           this.replace
52 |         )
53 |       }
54 |     })
55 |   } else {
56 |     compiler.plugin('compilation', compilation => {
57 |       compilation.plugin('html-webpack-plugin-beforeEmit', this.replace)
58 |     })
59 |   }
60 | }
61 | 
62 | module.exports = HtmlReplaceWebpackPlugin
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "html-replace-webpack-plugin",
 3 |   "version": "2.6.0",
 4 |   "description": "A Webpack plugin for replace HTML contents with custom pattern string or regex.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "node test.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/iminif/html-replace-webpack-plugin.git"
12 |   },
13 |   "keywords": [
14 |     "html-replace-webpack-plugin",
15 |     "html",
16 |     "replace",
17 |     "webpack",
18 |     "plugin",
19 |     "iminif"
20 |   ],
21 |   "author": "aeiou <iminif@outlook.com>",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/iminif/html-replace-webpack-plugin/issues"
25 |   },
26 |   "homepage": "https://github.com/iminif/html-replace-webpack-plugin#readme",
27 |   "notes": {
28 |     "2.2.7": "unpublished@2017-09-15 11:22"
29 |   },
30 |   "devDependencies": {
31 |     "html-webpack-plugin": "^4.5.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------