
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
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:
string
Allows the global outputPath
to be overriden on a per-package basis. Default is the global value.
assets
: object
Specifies 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
: array
Specifies 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.
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/"
}
})
]
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">
</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 1 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.