webpack-inject-plugin v 1.5.4

向打包文件中动态注入代码的 webpack 插件。

示例

用一个小项目展示一下webpack-inject-plugin插件的实战。

• 在文件夹中运行webpack。
• 监听dist/main.js并注入:

console.log('hello world');

打包末尾的语句：

cat dist/main.js | grep 'console'

使用

webpack.config.js

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


module.exports = {
    // 其他配置
    // ...
    plugins: [
        new InjectPlugin(function() {
            return "console.log('Hello World');"
        });
    ]
};

该插件接收一个参数，为一个返回要注入包中代码的函数。

该函数和loader使用相同的上下文，参见这里

如果您希望是异步的，可以返回要加载的原始内容，亦或是包含加载内容的Promise。

配置项

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

new InjectPlugin(loader, {
    entryName: 'entry name',         //  将注入的代码限制为仅包含该名称的入口
    entryOrder: ENTRY_ORDER.First    //  将注入的代码作为首个入口
                ENTRY_ORDER.Last     //  将注入的代码作为最后一个入口
                ENTRY_ORDER.NotLast  //  让注入的代码放到倒数第二个入口。(最后一个入口模块是 bundle 的API。当你不想重写它时很有用。)它是默认值。
});

属性名	类型	描述符
entryName	string | function	代码注入的入口过滤器。如果是字符串，则只是用具有相同名称的入口。如果是函数，则会在每个入口上调用 —— 但只对返回true的入口注入代码。
loaderID	string	为注入的loader设置独一无二的ID。如果省略该项，将自动为您生成一个。

new InjectPlugin(loader, {
  // 将代码注入到每个没有命名为foo的入口中
  entryName: key => key !== 'foo'
});

其他使用情况

虽然该插件可以作为一个独立的插件使用，但您也可以用它来创建其他的 webpack 插件，比如根据配置文件将代码注入到打包后的文件中。

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