https://github.com/sinoon/html-webpack-auto-inject-plugin
html-webpack-auto-inject-plugin，auto inject javascript file to html
https://github.com/sinoon/html-webpack-auto-inject-plugin
html-webpack-plugin webpack webpack-plugin
Last synced: about 1 year ago
JSON representation
html-webpack-auto-inject-plugin，auto inject javascript file to html
- Host: GitHub
- URL: https://github.com/sinoon/html-webpack-auto-inject-plugin
- Owner: sinoon
- License: mit
- Created: 2018-01-22T11:30:56.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-06T07:41:57.000Z (about 8 years ago)
- Last Synced: 2024-10-30T01:36:34.433Z (over 1 year ago)
- Topics: html-webpack-plugin, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 79.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Auto Inject extension for the HTML Webpack Plugin
[](https://badge.fury.io/js/html-webpack-auto-inject-plugin)
[](https://codecov.io/gh/sinoon/html-webpack-auto-inject-plugin)
html-webpack-auto-inject-plugin，auto inject js file to html
**Only Support Node 8**.You need node LTS version 8 or higher version.
## Why you need
Personally, when I need to require/import a js source injecting to html file.ie:`flexible.js`,`some log js`, I have to modify html template file or require/import file that I won't actually exec by code manually. Therefore, I explored a solution to share for such issue.
## Feature
Now Support:
- Auto inject js file
- Compress js file
Will Support
- Auto inject css file
- What you aim to by create issue to me
## How to use
This plugin require `html-webpack-plugin`,because listen the event by emit `html-webpack-plugin`:`html-webpack-plugin-before-html-processing`.
## Installation
You must be running webpack on node 8 or higher
Install the plugin with npm:
```bash
$ npm install --save-dev html-webpack-auto-inject-plugin
```
## Basic Usage
Require the plugin in your webpack config:
```javascript
const HtmlWebpackAutoInjectPlugin = require('html-webpack-auto-inject-plugin');
```
For now,just support javascript file import,and css file import in 1.0 version will supported.
All javascript file import config are set in `script`
Add the plugin to your webpack config as follows:
### options
#### script [Array]
Accept `string` for file path and `Object` for custom config.Above are explain of options:
| Key | Type | Default | Accept | Require | Mean |
| --- | --- | --- | --- | --- | --- |
| path | String | undefined | Any String | True | The path of your want auto inject to html |
| position | String | 'head' | ‘head’,’body' | False | The position your want to placed code. `head` for inject to head.`body` for inject to end of body. |
| compress | Boolean | false | true,false | False | Compress or not.`uglify-js`. |
```javascript
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackAutoInjectPlugin({
script: [
// relative path
'./path/to/js',
// recommend in this way by use node auto resolve the path of you need inject
require.resolve('amfe-flexible'),
// absolute path
'/User/sinoon/code/path/to/js',
// custom config
{
path: './path/to/js',
compress: true,
position: 'body'
}
]
})
]
```
## TODO
- [ ] Support Css.
- [ ] Support Ignore.Match by regexp.