Manipulate assets on the way to the HTML generated by
html-webpack-plugin
a fork of SimenB/add-asset-html-webpack-plugin
- still very raw initial version, done out of need in making a webpack setup crafting a dual module/nomodule build (es5/es6)
Install the plugin with npm:
$ npm i manipulate-assets-html-webpack-plugin -DNOTE: This plugin requires html-webpack-plugin@^2.10.0.
After webpack 4+, it is required to apply AddAssetHtmlPlugin after HtmlWebpackPlugin to register html-webpack-plugin-before-html-generation hook which is used inside first, while previous versions of webpack do not care about it.
The plugin will add the given JS or CSS file to the files Webpack knows about,
and put it into the list of assets html-webpack-plugin injects into the
generated html. Add the plugin the your config, providing it a filepath:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js',
},
plugins: [
new HtmlWebpackPlugin(),
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') }),
],
};This will add a script tag to the HTML generated by html-webpack-plugin, and
look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
<script src="some-file.js"></script>
</body>
</html>NOTE: You can also pass an array of assets to be added. Same API as mentioned below, just pass multiple objects as an array.
new AddAssetHtmlPlugin([
{ filepath: require.resolve('./some-file') },
{ filepath: require.resolve('./some-other-file') },
// Glob to match all of the dll file
{ filepath: require.resolve('./**/*.dll.js') },
]);