npm install --save-dev html-webpack-custom-inject
enhance html-webpack-plugin, you can use this plugin inject code fragment before html emit. html template as follows: index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="name" itemprop="name" content="feflow" /> <title>html resource webpack plugin template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="container"> <!--[prerender placeholder]--> </div> </body> </html>
config as follows: webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin'); const htmlWebpackCustomInject = require('html-webpack-custom-inject') module.exports = { entry: 'index.js', output: { path: __dirname + '/dist', filename: 'index_bundle.js' }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: path.resolve(__dirname, './index.html'), }), new htmlCopyCustomInject({ inject(chunkId, res) { if (/index\.html$/.test(chunkId)) { return res.replace(/<!--\s*\[prerender\s*placeholder\]\s*-->/g, function() { let res = '<div>code fragment you want to inject<div>'; return res; }) } return res; } }) ] }
You can pass a hash of configuration options to html-webpack-custom-inject.
Allowed values are as follows
| Name | Type | Default | Description |
|---|---|---|---|
inject |
{function inject(entryKey: string,res:string): string}} |
inject |
}