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 }) ] }