- Notifications
You must be signed in to change notification settings - Fork41
Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin
License
SimenB/add-asset-html-webpack-plugin
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Add a JavaScript or CSS asset to the HTML generated by
html-webpack-plugin
Install the plugin withnpm:
$ npm i add-asset-html-webpack-plugin -D
NOTE: This plugin requireshtml-webpack-plugin@^3,html-webpack-plugin@^4,orhtml-webpack-plugin@^5.
The plugin will add the given JS or CSS file to the files Webpack knows about,and put it into the list of assetshtml-webpack-plugin injects into thegenerated html. Add the plugin to your config, providing it a filepath:
constHtmlWebpackPlugin=require('html-webpack-plugin');constAddAssetHtmlPlugin=require('add-asset-html-webpack-plugin');constwebpackConfig={entry:'index.js',output:{path:'dist',filename:'index_bundle.js',},plugins:[newHtmlWebpackPlugin(),newAddAssetHtmlPlugin({filepath:require.resolve('./some-file')}),],};
This will add a script tag to the HTML generated byhtml-webpack-plugin, andlook like:
<!DOCTYPE html><html><head><metacharset="UTF-8"/><title>Webpack App</title></head><body><scriptsrc="index_bundle.js"></script><scriptsrc="some-file.js"></script></body></html>
NOTE: You can also pass an array of assets to be added. Same API as mentionedbelow, just pass multiple objects as an array.
newAddAssetHtmlPlugin([{filepath:require.resolve('./some-file')},{filepath:require.resolve('./some-other-file')},// Glob to match all of the dll file, make sure to use forward slashes on Windows{glob:require.resolve('./**/*.dll.js')},]);
Options are passed to the plugin during instantiation.
newAddAssetHtmlPlugin({filepath:require.resolve('./some-file')});
Type:string, mandatory unlessglob is defined
The absolute path of the file you want to add to the compilation, and resultingHTML file.
Type:string, mandatory unlessfilepath is defined
A glob used to locate files to add to the compilation. Seeglobby's docs for how to use it.
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, theassets will only be included in specified file globs.
Type:boolean, default:false
Iftrue, will append a unique hash of the file to the filename. This is usefulfor cache busting.
Type:boolean, default:true
Iftrue, will addfilepath + '.*' to the compilation as well. E.gfilepath.map andfilepath.gz.
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 tocss to create alink-tag instead of ascript-tag.
Type:object, default:{}
Extra attributes to be added to the generated tag. Useful to for instance addnomodule to a polyfill script. Theattributes object uses the key as thename of the attribute, and the value as the value of it. If value is simplytrue no value will be added.
An example of this is included in the repository.
Currently only supports script tags.
When adding assets, it's added to the start of the array, so whenhtml-webpack-plugin injects the assets, it's before other assets. If youdepend on some order for the assets beyond that, and ordering the pluginsdoesn't cut it, you'll have to create a custom template and add the tagsyourself.
Note: Remember to build the DLL file in a separate build.
Seeexample for an example of how to set it up. You can run itby cloning this repo, runningyarn followed byyarn run example.
constpath=require('path');constwebpack=require('webpack');constwebpackConfig={entry:{vendor:['react','redux','react-router'],},devtool:'#source-map',output:{path:path.join(__dirname,'build'),filename:'[name].dll.js',library:'[name]_[hash]',},plugins:[newwebpack.DllPlugin({path:path.join(__dirname,'build','[name]-manifest.json'),name:'[name]_[hash]',}),],};
Your main build:
constpath=require('path');constwebpack=require('webpack');constHtmlWebpackPlugin=require('html-webpack-plugin');constAddAssetHtmlPlugin=require('add-asset-html-webpack-plugin');constwebpackConfig={entry:'index.js',output:{path:'dist',filename:'index_bundle.js',},plugins:[newwebpack.DllReferencePlugin({context:path.join(__dirname),manifest:require('./build/vendor-manifest.json'),}),newHtmlWebpackPlugin(),newAddAssetHtmlPlugin({filepath:path.resolve(__dirname,'./build/*.dll.js'),}),],};
Seeexample for an example of how to use it. You can run itby cloning this repo, runningyarn followed byyarn run example.
constpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constAddAssetHtmlPlugin=require('../../');constwebpackConfig={entry:'entry.js',devtool:'#source-map',mode:'development',output:{path:'dist',filename:'index_bundle.js',},plugins:[newHtmlWebpackPlugin(),newAddAssetHtmlPlugin({filepath:path.resolve(__dirname,'./polyfill.js'),attributes:{nomodule:true,},}),],};
About
Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.