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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.