npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@superhuman/assets-webpack-plugin

v3.4.2

Published

Emits a json file with assets paths

Downloads

4

Readme

assets-webpack-plugin

Build Status Build status

Webpack plugin that emits a json file with assets paths.

Table of Contents

Why Is This Useful?

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.

Example output:

The output is a JSON object in the form:

{
    "entries": {
      "bundle_name": {
          "asset_kind": "/public/path/to/asset"
      }
    },
    "assets": [{
        "name": "hello.svg",
        "path": "/public/path/to/asset/hello.svg"
      }
    ]
}

Where:

  • entries is an object that contains all entry points listed in your webpack config
    • "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 asset
  • assets is an array containing all assets processed by webpack
    • name is the name of the image (path used in require or import)
    • path is the webpack generated public path to the image

For 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'
    }
}

and import of an image somewhere in application code using

import user from '../../assets/images/user.svg';

The plugin will output the following json file:

{
    "one": {
        "js": "/js/one_2bb80372ebe8047a68d4.bundle.js"
    },
    "two": {
        "js": "/js/two_2bb80372ebe8047a68d4.bundle.js"
    },
    "assets":[{
      "name":"assets/images/user.svg",
      "path":"/js/assets/images/user.svg"
    }]
}

Install

npm install assets-webpack-plugin --save-dev

Configuration

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]
}

Options

You can pass the following options:

filename: Name for the created json file. Defaults to webpack-assets.json

new AssetsPlugin({filename: 'assets.json'})

fullPath: 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

path: Path where to save the created json file. Defaults to the current directory.

new AssetsPlugin({path: path.join(__dirname, 'app', 'views')})

prettyPrint: Whether to format the json output for readability. Defaults to false.

new AssetsPlugin({prettyPrint: true})

processOutput: Formats the assets output. Defaults is JSON stringify function.

new AssetsPlugin({
    processOutput: function (assets) {
        return 'window.staticMap = ' + JSON.stringify(assets)
    }
})

update: When set to true, the output json file will be updated instead of overwritten. Defaults to false.

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}
// }

assetsRegex: Regex for assets that should be extracted from Webpack stats. Defaults to /\.(jpe?g|png|gif|svg)$/

new AssetsPlugin({assetsRegex: /\.(svg)$/})

Using in multi-compiler mode

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]
    }
])

Using this with Rails

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['entries'][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>

Test

npm test