# html-webpack-inline-source-plugin

> Embed javascript and css source inline when using the webpack dev server or middleware

Latest version **0.0.10** (published 2018-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install html-webpack-inline-source-plugin
pnpm add html-webpack-inline-source-plugin
yarn add html-webpack-inline-source-plugin
bun add html-webpack-inline-source-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2018-03-08 |
| First published | 2016-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 9.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 417 |
| Author | Dustin Jackson |
| Maintainers | dustinjackson |
| Keywords | webpack, plugin, html-webpack-plugin, inline, source |

## Links

- npm: https://www.npmjs.com/package/html-webpack-inline-source-plugin
- Repository: https://github.com/dustinjackson/html-webpack-inline-source-plugin
- Issues: https://github.com/dustinjackson/html-webpack-inline-source-plugin/issues
- npm.io page: https://npm.io/package/html-webpack-inline-source-plugin

## Dependencies (3)

- [slash](https://npm.io/package/slash.md) ^1.0.0
- [source-map-url](https://npm.io/package/source-map-url.md) ^0.4.0
- [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) ^1.0.5

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.10 (latest) — 2018-03-08
- 1.0.0-beta.2 (beta) — 2018-11-26
- 0.0.9 — 2017-05-29
- 0.0.8 — 2017-04-11
- 0.0.7 — 2017-03-13
- 0.0.6 — 2016-12-21
- 0.0.5 — 2016-12-09
- 0.0.4 — 2016-12-07
- 0.0.3 — 2016-11-15
- 0.0.2 — 2016-11-15
- 0.0.1 — 2016-11-13

## README

Inline Source extension for the HTML Webpack Plugin
========================================
[![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)

Enhances [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)
functionality by adding the `{inlineSource: 'regex string'}` option.

This is an extension plugin for the [webpack](http://webpack.github.io) plugin [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin).  It allows you to embed javascript and css source inline.

Installation
------------
You must be running webpack on node 4 or higher

Install the plugin with npm:
```shell
$ npm install --save-dev html-webpack-inline-source-plugin
```

Basic Usage
-----------
Require the plugin in your webpack config:

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

Add the plugin to your webpack config as follows:

```javascript
plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackInlineSourcePlugin()
]  
```
The above configuration will actually do nothing due to the configuration defaults.

When you set `inlineSource` to a regular expression the source code for any javascript or css file names that match will be embedded inline in the resulting html document.
```javascript
plugins: [
  new HtmlWebpackPlugin({
		inlineSource: '.(js|css)$' // embed all javascript and css inline
	}),
  new HtmlWebpackInlineSourcePlugin()
]  
```

Sourcemaps
----------
If any source files contain a sourceMappingURL directive that isn't a data URI, then the sourcemap URL is corrected to be relative to the domain root (unless it already is) instead of to the original source file.

All sourcemap comment styles are supported:

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

---
_Source: https://npm.io/package/html-webpack-inline-source-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._