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:
var HtmlWebpackPlugin = require('html-webpack-plugin')
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
var 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') }
])Options are passed to the plugin during instantiation.
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })Type: string, mandatory
The absolute path of the file you want to add to the compilation, and resulting HTML file.
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.
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.
var path = require('path')
var webpack = require('webpack')
var webpackConfig = {
entry: {
vendor: ['react', 'redux', 'react-router']
},
devtool: '#source-map',
output: {
path: path.join(__dirname, 'build'),
filepath: '[name].dll.js',
library: '[name]_[hash]'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'build', '[name]-manifest.json'),
name: '[name]_[hash]'
}),
],
}Your main build:
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filepath: 'index_bundle.js'
},
plugins: [
new webpack.DllReferencePlugin({
context: path.join(__dirname),
manifest: require('./build/vendor-manifest.json')
}),
new HtmlWebpackPlugin(),
new AddAssetHtmlPlugin({
filepath: require.resolve('./build/vendor.dll.js'),
includeSourcemap: true
})
]
}