Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
assets-webpack-plugin
Advanced tools
The assets-webpack-plugin is a Webpack plugin that generates a JSON file containing the paths of the output files. This is useful for server-side rendering or when you need to inject the assets into your HTML manually.
Generate JSON file with asset paths
This feature allows you to generate a JSON file that contains the paths of the output files. This is useful for server-side rendering or when you need to inject the assets into your HTML manually.
const AssetsWebpackPlugin = require('assets-webpack-plugin');
module.exports = {
// other webpack configuration
plugins: [
new AssetsWebpackPlugin({
path: path.join(__dirname, 'dist'),
filename: 'assets.json'
})
]
};
Customizing the output format
This feature allows you to customize the format of the generated JSON file. For example, you can enable pretty printing to make the JSON file more readable.
const AssetsWebpackPlugin = require('assets-webpack-plugin');
module.exports = {
// other webpack configuration
plugins: [
new AssetsWebpackPlugin({
path: path.join(__dirname, 'dist'),
filename: 'assets.json',
prettyPrint: true
})
]
};
Including additional information
This feature allows you to include additional information in the generated JSON file. For example, you can specify which file types to include in the JSON file.
const AssetsWebpackPlugin = require('assets-webpack-plugin');
module.exports = {
// other webpack configuration
plugins: [
new AssetsWebpackPlugin({
path: path.join(__dirname, 'dist'),
filename: 'assets.json',
includeAllFileTypes: false,
fileTypes: ['js', 'css']
})
]
};
The html-webpack-plugin simplifies the creation of HTML files to serve your webpack bundles. It automatically injects the output files into the HTML file. Unlike assets-webpack-plugin, which generates a JSON file with asset paths, html-webpack-plugin directly creates an HTML file with the necessary script and link tags.
The webpack-manifest-plugin generates a manifest file that maps the original filenames to the hashed filenames. This is similar to assets-webpack-plugin, but it focuses on creating a manifest file for cache busting and long-term caching.
The webpack-assets-manifest plugin generates a JSON file that maps the original filenames to the hashed filenames, similar to assets-webpack-plugin. However, it provides more customization options and supports merging with existing manifest files.
Webpack plugin that emits a json file with assets paths.
⚠️ Starting with version 6, this plugin works with Webpack 5+.
If you are working with an older version of Webpack, you can use the most recent 5.x.x release (5.1.2
).
npm install assets-webpack-plugin --save-dev
If you're using Webpack 4 or below:
npm install assets-webpack-plugin@5.1.2 --save-dev
When working with Webpack you might want to generate your bundles with a generated hash in them (for cache busting).
This plug-in outputs a json file with the paths of the generated assets so you can find them from somewhere else.
The output is a JSON object in the form:
{
"bundle_name": {
"asset_kind": "/public/path/to/asset"
}
}
Where:
"bundle_name"
is the name of the bundle (the key of the entry object in your webpack config, or "main" if your entry is an array)."asset_kind"
is the camel-cased file extension of the assetFor example, given the following webpack config:
{
entry: {
one: ['src/one.js'],
two: ['src/two.js']
},
output: {
path: path.join(__dirname, "public", "js"),
publicPath: "/js/",
filename: '[name]_[hash].bundle.js'
}
}
The plugin will output the following json file:
{
"one": {
"js": "/js/one_2bb80372ebe8047a68d4.bundle.js"
},
"two": {
"js": "/js/two_2bb80372ebe8047a68d4.bundle.js"
}
}
In your webpack config include the plug-in. And add it to your config:
var path = require('path')
var AssetsPlugin = require('assets-webpack-plugin')
var assetsPluginInstance = new AssetsPlugin()
module.exports = {
// ...
output: {
path: path.join(__dirname, "public", "js"),
filename: "[name]-bundle-[hash].js",
publicPath: "/js/"
},
// ....
plugins: [assetsPluginInstance]
}
You can pass the following options:
filename
Optional. webpack-assets.json
by default.
Name for the created json file.
new AssetsPlugin({filename: 'assets.json'})
fullPath
Optional. true
by default.
If false
the output will not include the full path
of the generated file.
new AssetsPlugin({fullPath: false})
e.g.
/public/path/bundle.js
vs bundle.js
removeFullPathAutoPrefix
Optional. false
by default.
If true
the full path will automatically be stripped of the /auto/
prefix generated by webpack.
new AssetsPlugin({removeFullPathAutoPrefix: true})
e.g.
/public/path/bundle.js
vs bundle.js
includeManifest
Optional. false
by default.
Inserts the manifest javascript as a text
property in your assets.
Accepts the name or names of your manifest chunk. A manifest is the last CommonChunk that
only contains the webpack bootstrap code. This is useful for production
use when you want to inline the manifest in your HTML skeleton for long-term caching.
See issue #1315
or a blog post
to learn more.
new AssetsPlugin({includeManifest: 'manifest'})
// assets.json:
// {entries: {manifest: {js: `hashed_manifest.js`, text: 'function(modules)...'}}}
//
// Your html template:
// <script>
// {assets.entries.manifest.text}
// </script>
The includeManifest
option also accepts an array of manifests:
new AssetsPlugin({includeManifest: ['manifest1', 'manifest2']})
// assets.json:
// {entries: {
// manifest1: {js: `hashed_manifest.js`, text: 'function(modules)...'},
// manifest2: {js: `hashed_manifest.js`, text: 'function(modules)...'}
// }}
manifestFirst
Optional. false
by default.
Orders the assets output so that manifest is the first entry. This is useful for cases where script tags are generated from the assets json output, and order of import is important.
new AssetsPlugin({manifestFirst: true})
path
Optional. Defaults to the current directory.
Path where to save the created JSON file. Will default to the highest level of the project unless useCompilerPath is specified.
new AssetsPlugin({path: path.join(__dirname, 'app', 'views')})
useCompilerPath
new AssetsPlugin({useCompilerPath: true})
Will override the path to use the compiler output path set in your webpack config.
prettyPrint
Optional. false
by default.
Whether to format the JSON output for readability.
new AssetsPlugin({prettyPrint: true})
processOutput
Optional. Defaults is JSON stringify function.
Formats the assets output.
new AssetsPlugin({
processOutput: function (assets) {
return 'window.staticMap = ' + JSON.stringify(assets)
}
})
update
Optional. false
by default.
When set to true
, the output JSON file will be updated instead of overwritten.
new AssetsPlugin({update: true})
metadata
Inject metadata into the output file. All values will be injected into the key "metadata".
new AssetsPlugin({metadata: {version: 123}})
// Manifest will now contain:
// {
// metadata: {version: 123}
// }
includeAllFileTypes
Optional. true
by default.
When set false, falls back to the fileTypes
option array to decide which file types to include in the assets file.
new AssetsPlugin({includeAllFileTypes: false})
fileTypes
Optional. ['js', 'css']
by default.
When set and includeAllFileTypes
is set false, only assets matching these types will be included in the assets file.
new AssetsPlugin({fileTypes: ['js', 'jpg']})
keepInMemory
Optional. false
by default.
When set the assets file will only be generated in memory while running webpack-dev-server
and not written to disk.
new AssetsPlugin({keepInMemory: true})
integrity
Optional. false
by default.
When set the output from webpack-subresource-integrity is included in the assets file.
Please make sure you have webpack-subresource-integrity
installed and included in your webpack plugins.
new AssetsPlugin({integrity: true})
Output will now look like this:
{
"main": {
"js": "/bundle.js",
"jsIntegrity": "sha256-ANGwtktWN96nvBI/cjekdTvd0Dwf7SciIFTQ2lpTxGc= sha384-Ly439pF3K+J8hnhk1BEcjKnv1R9BApFYVIVJvr64PcgBjdT4N7hfPzQynItHwcaO"
},
"vendors~main": {
"js": "/1.bundle.js",
"jsIntegrity": "sha256-yqNi1hgeAdkXVOORgmVMeX+cbuXikoj6I8qWZjPegsA= sha384-4X75tnsGDwnwL5kBUPsx2ko9DeWy0xM8BcDQdoR185yho+OnxjjPXl2wCdebLWTG"
}
}
entrypoints
Optional. false
by default.
If the 'entrypoints' option is given, the output will be limited to the entrypoints and the chunks associated with them.
new AssetsPlugin({entrypoints: true})
includeFilesWithoutChunk
Optional. false
by default.
When set and entrypoints
is set true, will output any files that are part of the unnamed chunk to an additional unnamed ("") entry.
new AssetsPlugin({includeFilesWithoutChunk: true})
includeAuxiliaryAssets
Optional. false
by default.
When set, will output any files that are part of the chunk and marked as auxiliary assets.
new AssetsPlugin({includeAuxiliaryAssets: true})
includeDynamicImportedAssets
Optional. false
by default.
When set, will output any files that are part of the chunk and marked as preloadable or prefechtable child assets via a dynamic import. See: https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules
new AssetsPlugin({includeDynamicImportedAssets: true})
If you use webpack multi-compiler mode and want your assets written to a single file, you must use the same instance of the plugin in the different configurations.
For example:
var webpack = require('webpack')
var AssetsPlugin = require('assets-webpack-plugin')
var assetsPluginInstance = new AssetsPlugin()
webpack([
{
entry: {one: 'src/one.js'},
output: {path: 'build', filename: 'one-bundle.js'},
plugins: [assetsPluginInstance]
},
{
entry: {two:'src/two.js'},
output: {path: 'build', filename: 'two-bundle.js'},
plugins: [assetsPluginInstance]
}
])
You can use this with Rails to find the bundled Webpack assets via Sprockets.
In ApplicationController
you might have:
def script_for(bundle)
path = Rails.root.join('app', 'views', 'webpack-assets.json') # This is the file generated by the plug-in
file = File.read(path)
json = JSON.parse(file)
json[bundle]['js']
end
Then in the actions:
def show
@script = script_for('clients') # this will retrieve the bundle named 'clients'
end
And finally in the views:
<div id="app">
<script src="<%= @script %>"></script>
</div>
You can use this with ASP.NET Core via the WebpackTag library.
npm test
FAQs
Emits a json file with assets paths
The npm package assets-webpack-plugin receives a total of 273,576 weekly downloads. As such, assets-webpack-plugin popularity was classified as popular.
We found that assets-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.