html-webpack-deploy-assets-plugin
Advanced tools
Add the ability to deploy assets from node_modules packages
Enhances html-webpack-plugin functionality by allowing you to specify js or css assets from node_modules to be copied and included.
You must be running webpack on node 0.12.x or higher
Install the plugin with npm:
$ npm install --save-dev html-webpack-deploy-assets-plugin
The available options are:
packagePath: string
The path to installed packages, relative to the current directory. Default is node_modules.
append: boolean
Specifies whether the assets will be appended (true) or prepended (false) to the list of assets in the html file. Default is false.
publicPath: boolean or string
Specifying whether the assets should be prepended with webpack's public path or a custom publicPath (string).
A value of false may be used to disable prefixing with webpack's publicPath, or a value like myPublicPath/ may be used to prefix all assets with the given string. Default is true.
outputPath: string
A directory name that will be created for each of the deployed assets.
Instances of [name] will be replaced with the package name.
Instances of [version] will be replaced with the package version.
Default is [name]-[version].
packages: object
Specifies the definition of the assets from installed packages to be deployed. Defaults is {}.
The keys/properties of the packages option must be the name of an installed package, and the definition must be an object with the following properties:
stringAllows the global outputPath to be overriden on a per-package basis. Default is the global value.
assets: objectSpecifies files or directories to be copied from the package's directory.
The keys/properies are the asset to be copied, and the values are the target asset location within webpack's output directory.
These are used as the from & to properties for the internal usage of the copy-webpack-plugin
entries: arraySpecifies files to be included in the html file.
The file paths should be relative to webpack's output directory.
assets: object
Specifies the definition of the local assets to be deployed. Defaults is {}.
The keys/properies are the asset to be copied, and the values are the target asset location within webpack's output directory.
links: array
Specifies the definition of the links to be deployed. Defaults is [].
The objects in the links are of the shape:
{
href: "path/to/asset", // required - must be a string
rel: "icon", // required - must be a string
sizes: '16x16', // example of optional extra attribute
anyOtherAttribute: 'value'
}
For which the following would be injected into the html header:
<head>
<link href="${webpack.publicPath}/path/to/asset" rel="icon" sizes="16x16" anyOtherAttribute="value"/>
</head>
Deploying bootstrap css and fonts and an assets directory from local files:
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackDeployAssetsPlugin({
"packages": {
"bootstrap": {
"assets": {
"dist/css": "css/",
"dist/fonts": "fonts/"
},
"entries": [
"css/bootstrap.min.css",
"css/bootstrap-theme.min.css"
]
}
},
"assets": {
"src/assets": "assets/"
}
"link": [
{
"href": "/assets/icon.png",
"rel": "icon"
}
]
})
]
This will generate a dist/index.html with your webpack bundled output and the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="/assets/icon.png" rel="icon">
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
Note that additionally, the contents of the following directories will be copied:
node_modules/bootstrap/dist/css -> dist/bootstrap-3.3.7/css
node_modules/bootstrap/dist/fonts -> dist/bootstrap-3.3.7/fonts
src/assets -> dist/assets
FAQs
Add the ability to deploy assets from node_modules packages
The npm package html-webpack-deploy-assets-plugin receives a total of 0 weekly downloads. As such, html-webpack-deploy-assets-plugin popularity was classified as not popular.
We found that html-webpack-deploy-assets-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
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."