# @bpnetguy/webpack-inject-plugin 中文文档

规范地址：https://npmcn.com/package/%40bpnetguy/webpack-inject-plugin/

版本：2\.0\.4
npm 元数据更新时间：2022-07-22T23:48:12.184Z
中文译文更新时间：2026-11-08T13:09:58.199Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bpnetguy/webpack-inject-plugin
原文对照：https://npmcn.com/package/%40bpnetguy/webpack-inject-plugin/?lang=original
项目主页：https://github.com/adierkens/webpack-inject-plugin#readme
源码仓库：https://github.com/bpnetguy/webpack-inject-plugin

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：31 kB，14 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：webpack \>=5\.0\.0
- 首次发布：2022-07-21T05:32:03.114Z
- 最新版本发布：2022-07-22T23:48:12.102Z
- 近 30 天下载量：18249（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

一个网络包插件可以动态地将代码注入捆绑.

## 安装

```sh
npm install @bpnetguy/webpack-inject-plugin
```

也可以使用：`pnpm add @bpnetguy/webpack-inject-plugin`、`yarn add @bpnetguy/webpack-inject-plugin`、`bun add @bpnetguy/webpack-inject-plugin`

## README

# 网络套接字插件

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](https://npmcn.com/package/%40bpnetguy/webpack-inject-plugin/#readme-contributors) [![CircleCI](https://circleci.com/gh/adierkens/webpack-inject-plugin/tree/master.svg?style=svg)](https://circleci.com/gh/adierkens/webpack-inject-plugin/tree/master) [![npm version](https://badge.fury.io/js/webpack-inject-plugin.svg)](https://badge.fury.io/js/webpack-inject-plugin) [![npm](https://img.shields.io/npm/dt/webpack-inject-plugin.svg)](https://www.npmjs.com/package/webpack-inject-plugin) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo) [![codecov](https://codecov.io/gh/adierkens/webpack-inject-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/adierkens/webpack-inject-plugin)

一个网络包插件可以动态地将代码注入捆绑.

您可以查看一个实例 [这里](https://npmcn.com/package/%40bpnetguy/webpack-inject-plugin/example)

## 使用量

```javascript
# 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');"
        });
    ]
};
```

这个webpack插件接受一个单一的参数,这个函数返回代码以注入捆绑.

此功能与加载器的上下文相同, 所以所有 [这里](https://webpack.js.org/api/loaders/#the-loader-context) 适用.

您可以返回原始内容来装入, 或者 `Promise` 它决定了内容, 如果你想成为同步.

### 选项

您还可以通过更多选项 :

```javascript
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.
});
```

### 选项。 输入Name

> `string` | `function`

用于输入代码的过滤器 . 如果有的话 `string`,只使用同名条目. 如果有的话 `function`时,每个条目名都使用它 _事实_ 回应

前辈.

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

### 选项。负载ID

> `string`

注射式加载器的可选单相ID. 如果省略, 将自动为您生成一个 .

## 额外使用大小写

虽然这可以用作独立的插件,但您也可以使用它来创建其他的webpack插件,比如在配置文件的基础上将代码注入到构建中.

示例

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

## 贡献者

感谢这些伟大的人[emoji 密钥](https://github.com/kentcdodds/all-contributors#emoji-key):

| [![Adam Dierkens](https://avatars1.githubusercontent.com/u/13004162?v=4)  
**亚当·迪尔肯斯**](https://adamdierkens.com/)  
[💻](https://github.com/adierkens/webpack-inject-plugin/commits?author=adierkens "Code") | [![YellowKirby](https://avatars1.githubusercontent.com/u/1654019?v=4)  
**黄克比**](https://github.com/YellowKirby)  
[💻](https://github.com/adierkens/webpack-inject-plugin/commits?author=YellowKirby "Code") | [![Chvin](https://avatars2.githubusercontent.com/u/5383506?v=4)  
**克温**](https://github.com/chvin)  
[💻](https://github.com/adierkens/webpack-inject-plugin/commits?author=chvin "Code") |
| :-: | :-: | :-: |
|  |  |  |

本项目遵循 [全部贡献者](https://github.com/kentcdodds/all-contributors) 规格。 任何捐款都欢迎!

## 常见问题

### @bpnetguy/webpack-inject-plugin 是什么？

一个网络包插件可以动态地将代码注入捆绑\.

### 如何安装 @bpnetguy/webpack-inject-plugin？

在项目目录运行 npm install @bpnetguy/webpack-inject-plugin，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：webpack（\>=5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bpnetguy/webpack-inject-plugin 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bpnetguy/webpack-inject-plugin 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bpnetguy/webpack-inject-plugin 可以商用吗？

@bpnetguy/webpack-inject-plugin 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bpnetguy/webpack-inject-plugin 的下载量有多少？

根据 npm 官方下载统计，@bpnetguy/webpack-inject-plugin 在 2026/10/09 – 2026/11/07 这 30 天内被下载 18,249 次，日均约 608 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bpnetguy/webpack-inject-plugin 还在维护吗？

最新版本 2\.0\.4 发布于 2022/07/23（4 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/07/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。