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

@bpnetguy/webpack-inject-plugin

v2.0.4

Published

A webpack plugin to dynamically inject code into the bundle.

Downloads

10,972

Readme

webpack-inject-plugin

All Contributors CircleCI npm version npm XO code style codecov

A webpack plugin to dynamically inject code into the bundle.

You can check out an example here

Usage

# webpack.config.js

const InjectPlugin = require('webpack-inject-plugin').default;


module.exports = {
    // Other stuff in your webpack config

    plugins: [
        new InjectPlugin(function() {
            return "console.log('Hello World');"
        });
    ]
};

This webpack plugin accepts a single argument, a function to which returns the code to inject into the bundle.

The function is called using the same context as the loader, so everything here applies.

You can either return the raw content to load, or a Promise which resolves to the content, if you wish to be async.

options

You can also pass in more options:

import InjectPlugin, { ENTRY_ORDER } from 'webpack-inject-plugin';

new InjectPlugin(loader, {
    entryName: 'entry name',         //  Limit the injected code to only the entry w/ this name
    entryOrder: ENTRY_ORDER.First    //  Make the injected code be the first entry point
                ENTRY_ORDER.Last     //  Make the injected code be the last entry point
                ENTRY_ORDER.NotLast  //  Make the injected code be second to last. (The last entry module is the API of the bundle. Useful when you don't want to override that.) This is the default.
});

options.entryName

string | function

A filter for which entries to inject code into. If a string, only an entry with the same name will be used. If a function, it will be called with each entry name -- and only inject code for each truthy response

ex.

new InjectPlugin(loader, {
  // This will inject code into every entry that's not named `foo`
  entryName: key => key !== 'foo'
});

options.loaderID

string

An optional uniquie ID for the injected loader. If omitted, one will automatically be generated for you.

Additional Use Cases

Though this could be used as a standalone plugin, you could also use it to create other webpack plugins, such as injecting code into the build based on a config file.

Example:

import InjectPlugin from 'webpack-inject-plugin';

function customLoader(options) {
  return () => {
    return "console.log('My custom code generated from `options`');";
  };
}

export default class MyPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    new InjectPlugin(customLoader(this.options)).apply(compiler);
  }
}

Contributors

Thanks goes to these wonderful people (emoji key):

| Adam Dierkens💻 | YellowKirby💻 | Chvin💻 | | :---: | :---: | :---: |

This project follows the all-contributors specification. Contributions of any kind welcome!