https://github.com/webkong/html-webpack-assets-insert-plugin
Enhances html-webpack-plugin functionality with script and style and html elements insert to html file.
https://github.com/webkong/html-webpack-assets-insert-plugin
Last synced: 4 months ago
JSON representation
Enhances html-webpack-plugin functionality with script and style and html elements insert to html file.
- Host: GitHub
- URL: https://github.com/webkong/html-webpack-assets-insert-plugin
- Owner: webkong
- License: mit
- Created: 2020-08-17T09:53:25.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-20T10:21:31.000Z (almost 6 years ago)
- Last Synced: 2025-09-26T07:41:29.411Z (9 months ago)
- Language: JavaScript
- Size: 87.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Assets Extension for HTML Webpack Plugin
[](http://badge.fury.io/js/html-webpack-assets-insert-plugin) [](https://travis-ci.org/webkong/html-webpack-assets-insert-plugin.svg?branch=master)
[](https://nodei.co/npm/html-webpack-assets-insert-plugin/)
Enhances [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
functionality with different deployment options for your html.
This is an extension plugin for the [webpack](http://webpack.github.io) plugin [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) - a plugin that simplifies the creation of HTML files to serve your webpack bundles.
The raw [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) incorporates all webpack-generated javascipt as `` elements and css as `<link>` elements in the generated html. This plugin allows you to:
- add script tags to html file;
- add style tags to html file;
## Installation
You must be running webpack (3.x, 4.x) on node 8+.
Install the plugin with npm:
```shell
$ npm install html-webpack-assets-insert-plugin -D
# or
$ yarn install html-webpack-assets-insert-plugin -D
```
Not that you will need v3.x or v4.x of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
You may see an `UNMET PEER DEPENDENCY` warnings for webpack and various plugins.
## Basic Usage
Add the plugin to your webpack config as follows:
```javascript
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackAssetsInsertPlugin({
js: {
prepend: true,
path: [
"https://cdn.jsdelivr.net/npm/vue",
"https://cdn.jsdelivr.net/npm/vue-router",
],
},
css: {
prepend: false,
path: ["http://testcss.com/test.css"],
},
}),
];
```
The effect of the compiled:
```html
<head>
....
<link href="http://testcss.com/test.css" rel="stylesheet" />
</head>
<body>
...
<!-- add by plugin -->
<script src="https://cdn.jsdelivr.net/npm/vue">