This is an extension plugin for the webpack plugin html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.
The raw html-webpack-plugin incorporates all webpack-generated javascipt as synchronous<script> elements in the generated html. This plugin allows you to:
- add custom callback to update HTML
You must be running webpack (4.x) on node 6+. Install the plugin with npm:
$ npm install html-webpack-custom-callback-plugin --save-devNot that you will need v3.0.6+ of html-webpack-plugin
Add the plugin to your webpack config as follows:
const HtmlWebpackCustomCallbackPlugin = require('html-webpack-custom-callback-plugin');In your Webpack config object, add
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackCustomCallbackPlugin({
callback: updateBundleHtml,
}),
] Here is the example of custom callback
const updateBundleHtml = (html) => {
// Strip <head> tags.
html = html.replace(/<(\/)?head>/g, '');
// Swap <style> and <script> positions.
html = html.replace(/(<style .*(?=<\/style>)<\/style>)(<script .*(?=<\/script>)<\/script>)/, '$2$1');
return html;
}