Add a JavaScript or CSS asset to the HTML generated by
html-webpack-plugin
Install the plugin with npm:
$ npm i add-asset-html-webpack-plugin -DNOTE: This plugin requires html-webpack-plugin@^2.10.0.
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') },
]);Options are passed to the plugin during instantiation.
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') });Type: string|Glob, mandatory
The absolute path of the file you want to add to the compilation, and resulting HTML file. Also support globby string.
Type: string|Array<string>, default `[]
Files that the assets will be added to.
By default the assets will be included in all files. If files are defined, the assets will only be included in specified file globs.
Type: boolean, default: false
If true, will append a unique hash of the file to the filename. This is
useful for cache busting.
Type: boolean, default: true
If true, will add filepath + '.map' to the compilation as well.
Type: string
If set, will be used as the output directory of the file.
Type: string
If set, will be used as the public path of the script or link tag.
Type: string, default: js
Can be set to css to create a link-tag instead of a script-tag.
Note: Remember to build the DLL file in a separate build.
See example for an example of how to set it up. You can run it by
cloning this repo, running yarn followed by yarn run example.
When adding assets, it's added to the start of the array, so when
html-webpack-plugin injects the assets, it's before other assets. If you
depend on some order for the assets beyond that, and ordering the plugins
doesn't cut it, you'll have to create a custom template and add the tags
yourself.
const path = require('path');
const webpack = require('webpack');
const webpackConfig = {
entry: {
vendor: ['react', 'redux', 'react-router'],
},
devtool: '#source-map',
output: {
path: path.join(__dirname, 'build'),
filename: '[name].dll.js',
library: '[name]_[hash]',
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'build', '[name]-manifest.json'),
name: '[name]_[hash]',
}),
],
};Your main build:
const path = require('path');
const webpack = require('webpack');
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 webpack.DllReferencePlugin({
context: path.join(__dirname),
manifest: require('./build/vendor-manifest.json'),
}),
new HtmlWebpackPlugin(),
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname,'./build/*.dll.js'),
}),
],
};