manipulate-assets-html-webpack-plugin
Advanced tools
do something with assets on the way to the generated HTML file
Manipulate assets on the way to the HTML generated by
html-webpack-plugin
a fork of SimenB/add-asset-html-webpack-plugin
Install the plugin with npm:
$ npm i manipulate-assets-html-webpack-plugin -D
NOTE: 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') },
]);
FAQs
do something with assets on the way to the generated HTML file
We found that manipulate-assets-html-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.