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 🙏

© 2020 – Pkg Stats / Ryan Hefner

webpack-disk-plugin

v0.0.2

Published

Webpack disk plugin

Downloads

2,800

Readme

Webpack Disk Plugin

Build Status

This plugin will take an arbitrary Webpack compiler asset (e.g., a JS, CSS, HTML, or other plugin-generated file) and write it directly to disk.

Normally this wouldn't be needed, but a specific good use case is when using webpack-dev-server that only has files available in memory over a network and you need to access a real file on disk. Potential situations where this comes up is in development with a Node.js server on the backend that ingests a webpack-produced file.

Installation

The plugin is available via npm:

$ npm install --save webpack-disk-plugin

Usage

The plugin hooks in to the after-emit event and writes any specified assets to the real underlying file system.

Options

  • output.path: The base directory to write assets to. (Default: ".").
  • files: An array of objects to map an asset to a file path

The files array is composed of objects of the form:

  • asset: A regex or string to match the name in the webpack compiler. Note that something like [hash].main.js will be fully expanded to something like e49186041feacefb583b.main.js.
  • output: An object with additional options:
    • path: Override the top-level output.path directory to write too.
    • filename: A specified filename to write to. Can be a straight string or a function that gets the asset name to further mutate. Also may be a single filename, a relative path to append to the base path, or an absolute path.

Notes

  • Can only have 1 unique output path: 2+ files cannot target the same full file path. At the same time, you can have 2+ input asset matches.

Examples

Additional examples are provided in: demo/webpack.config.js. If you have a clone of this repository with devDependencies, you can run:

# Output using `webpack`
$ npm run build-demo-wp

# Output using `webpack-dev-server`
$ npm run build-demo-wds

and see the results in the demo directory.

Basic

Here's a basic use case that copies and renames one file.

var DiskPlugin = require("webpack-disk-plugin");

module.exports = {
  plugins: [
    // Everything else **first**.

    // Write out asset files to disk.
    new DiskPlugin({
      output: {
        path: "build"
      },
      files: [
        { asset: "stats.json" },
        { asset: /[a-f0-9]{20}\.main\.js/, output: { filename: "file.js" } }
      ]
    }),
  ]
}

Advanced

Here's an advanced use case that has nested directories and functionally renames files:

var DiskPlugin = require("webpack-disk-plugin");

module.exports = {
  plugins: [
    // Everything else **first**.

    // Write out asset files to disk.
    new DiskPlugin({
      output: { path: "build" },
      files: [
        { asset: "stats.json", output: { filename: "nested/stats.json" } },
        {
          asset: /[a-f0-9]{20}\.main\.js/,
          output: {
            // Custom namer: invert the hash.
            filename: function (name) {
              return "main." + name.match(/[a-f0-9]{20}/)[0] + ".js";
            }
          }
        }
      ]
    }),
  ]
}

Contributions

Contributions welcome! Make sure to pass $ npm run check.