JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17893
  • Score
    100M100P100Q136799F
  • License MIT

A webpack plugin to dynamically inject code into the bundle.

Package Exports

  • webpack-inject-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-inject-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.

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
    order:     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.
});

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

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

💻

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