# @effortlessmotion/html-webpack-inline-source-plugin 中文文档

规范地址：https://npmcn.com/package/%40effortlessmotion/html-webpack-inline-source-plugin/

版本：1\.0\.3
npm 元数据更新时间：2022-04-05T06:50:44.658Z
中文译文更新时间：2026-11-13T08:32:15.955Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40effortlessmotion/html-webpack-inline-source-plugin
原文对照：https://npmcn.com/package/%40effortlessmotion/html-webpack-inline-source-plugin/?lang=original
项目主页：https://github.com/dustinjackson/html-webpack-inline-source-plugin
源码仓库：https://github.com/dustinjackson/html-webpack-inline-source-plugin

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

- 包体积（解压后）：10.8 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=10\.13\.0
- 运行依赖：3 个
- peer 依赖：html-webpack-plugin \>=5，webpack \>=5
- 首次发布：2021-07-15T05:58:22.621Z
- 最新版本发布：2021-07-24T00:38:35.812Z
- 近 30 天下载量：24298（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

使用 Webpack dev 服务器或中间软件时嵌入javascript和 css 源入

## 安装

```sh
npm install @effortlessmotion/html-webpack-inline-source-plugin
```

也可以使用：`pnpm add @effortlessmotion/html-webpack-inline-source-plugin`、`yarn add @effortlessmotion/html-webpack-inline-source-plugin`、`bun add @effortlessmotion/html-webpack-inline-source-plugin`

## README

# HTML Webpack 插件的内入源扩展

[![npm version](https://badge.fury.io/js/html-webpack-inline-source-plugin.svg)](https://badge.fury.io/js/html-webpack-inline-source-plugin) [![Build status](https://travis-ci.org/DustinJackson/html-webpack-inline-source-plugin.svg?branch=master)](https://travis-ci.org/DustinJackson/html-webpack-inline-source-plugin) [![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square)](https://github.com/Flet/semistandard)

增强 [html-webpack-插件](https://github.com/ampedandwired/html-webpack-plugin) 通过添加 `{inlineSource: 'regex string'}` 选项.

警告: 这个模块是来自 [https://github.com/dustinjackson/html-webpack-inline-source-plugin (中文(简体) )](https://github.com/dustinjackson/html-webpack-inline-source-plugin) 用于支持 Webpack 5.

这是用于扩展插件 [网络软件包](http://webpack.github.io/) 插件 [html-webpack-插件](https://github.com/ampedandwired/html-webpack-plugin) (第5版或以上). 它允许您嵌入 Javascript 和 css 源入内.

## 安装

你一定是在10号节点或以上运行网络包装.

Npm 安装插件 :

```shell
$ npm install --save-dev html-webpack-inline-source-plugin
```

## 基本用途

需要网络包配置中的插件 :

```javascript
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
```

在您的 Webpack 配置中添加插件如下 :

```javascript
plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackInlineSourcePlugin()
]  
```

由于配置默认,上述配置实际上不会做任何事情.

当你准备好 `inlineSource` 到正则表达式中,任何匹配的javascript或cs文件名的源代码将嵌入到产生的html文档中.

```javascript
plugins: [
  new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$' // embed all javascript and css inline
    }),
  new HtmlWebpackInlineSourcePlugin()
]  
```

## 来源图

如果任何源文件包含一个不是数据URI的源映射URL指令,那么源映射URL会被更正为相对于域根(除非已经是)而不是相对于原始源文件.

所有源图注释样式都支持 :

-   `//# ...`
-   `//@ ...`
-   `/*# ...*/`
-   `/*@ ...*/`

## 常见问题

### @effortlessmotion/html-webpack-inline-source-plugin 是什么？

使用 Webpack dev 服务器或中间软件时嵌入javascript和 css 源入

### 如何安装 @effortlessmotion/html-webpack-inline-source-plugin？

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

### @effortlessmotion/html-webpack-inline-source-plugin 支持 TypeScript 吗？

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

### @effortlessmotion/html-webpack-inline-source-plugin 支持 ESM 还是 CommonJS？

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

### @effortlessmotion/html-webpack-inline-source-plugin 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=10\.13\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @effortlessmotion/html-webpack-inline-source-plugin 可以商用吗？

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

### @effortlessmotion/html-webpack-inline-source-plugin 的下载量有多少？

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

### @effortlessmotion/html-webpack-inline-source-plugin 还在维护吗？

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