https://github.com/cklwblove/html-webpack-inline-code-plugin
Inline Code extension for the HTML Webpack Plugin
https://github.com/cklwblove/html-webpack-inline-code-plugin
html-webpack html-webpack-html-plugin
Last synced: 4 months ago
JSON representation
Inline Code extension for the HTML Webpack Plugin
- Host: GitHub
- URL: https://github.com/cklwblove/html-webpack-inline-code-plugin
- Owner: cklwblove
- License: mit
- Created: 2019-01-22T07:43:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T21:26:00.000Z (over 3 years ago)
- Last Synced: 2025-11-02T05:24:57.148Z (7 months ago)
- Topics: html-webpack, html-webpack-html-plugin
- Language: JavaScript
- Size: 853 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Inline Code tag for the HTML Webpack Plugin
===========================================
[](https://badge.fury.io/js/html-webpack-inline-code-plugin) [](https://travis-ci.org/cklwblove/html-webpack-inline-code-plugin) [](https://github.com/Flet/semistandard)
This is an extension plugin for the [webpack](http://webpack.github.io) plugin [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) (version 3.x or 4 or higher). It allows you to embed javascript and css source inline.
Installation
------------
You must be running webpack on node 6 or higher.
Install the plugin with npm:
```shell
$ npm install --save-dev html-webpack-inline-code-plugin
```
Basic Usage
-----------
Require the plugin in your webpack config:
```javascript
var HtmlWebpackInlineCodePlugin = require('html-webpack-inline-code-plugin');
```
Add the plugin to your webpack config as follows:
```javascript
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackInlineCodePlugin()
]
```
The above configuration will actually do nothing due to the configuration defaults.
Options
-------
The available options are:
- `headTags` | `bodyTags`: `array`
- `tagsName`: `string`,
Specifies the code extensions to use to determine. One of the `script` or `style` values;
- `tagsCode`: `string`
Inserted specific code.
Example
-------
config code
```javascript
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackInlineSourcePlugin({
headTags: [{
tagName: 'script',
tagCode: `var startTime = +new Date();`
}],
bodyTags: [{
tagName: 'script',
tagCode: `var endTime = +new Date();`
}]
})
]
```
Source html code
```html
Example
很抱歉，如果没有启用JavaScript，此项目将无法正常运行。请启用它。
```
Build compiled code
```html
Example
var startTime = +new Date();
很抱歉，如果没有启用JavaScript，此项目将无法正常运行。请启用它。
var endTime = +new Date();
```