Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justinidlerz/html-webpack-prefix-plugin
Prefix extension for the HTML-Webpack-Plugin for webpack 1.x
https://github.com/justinidlerz/html-webpack-prefix-plugin
Last synced: 16 days ago
JSON representation
Prefix extension for the HTML-Webpack-Plugin for webpack 1.x
- Host: GitHub
- URL: https://github.com/justinidlerz/html-webpack-prefix-plugin
- Owner: Justinidlerz
- License: mit
- Created: 2016-07-25T06:39:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T12:24:27.000Z (over 1 year ago)
- Last Synced: 2024-10-04T13:27:05.969Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 326 KB
- Stars: 17
- Watchers: 2
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
HTML-Webpack-Prefix-Plugin
==========================
Prefix extension for the HTML-Webpack-Plugin
Enhances [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) function by adding the options.
```javascript
{
prefix: '//example.com/',
attrs : {
'img:src': false
}
}
```
This is an extension plugin for the [webpack](http://webpack.github.io) plugin [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)
A plugin that simplifies the creation of HTML files to serve your webpack bundles.
Compatibility
=============
Only compatible with Webpack 1.x and 2.x
Installation
------------
You must be running webpack on node 6.x or higher
Install the plugin with npm:
```shell
$ npm install html-webpack-prefix-plugin --save-dev
```
Basic Usage
-----------
Add the plugin to your webpack config as follows:
```javascript
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackPrefixPlugin()
]
```
The above configuration will actually do nothing due to the configuration defaults.
As soon as you now set `prefix` to a path the generated output of the HtmlWebpackPlugin will always append prefix to matched attributes from HTML label.
```javascript
plugins: [
new HtmlWebpackPlugin({
prefix: '//example.com/'
}),
new HtmlWebpackPrefixPlugin()
]
```
Even if you generate multiple files make sure that you add the HtmlWebpackPrefixPlugin **only once**:
```javascript
plugins: [
new HtmlWebpackPlugin({
prefix: '//example.com/'
}),
new HtmlWebpackPlugin({
prefix: '//example.com/',
filename: 'demo.html'
}),
new HtmlWebpackPlugin({
prefix: '//example.com/',
filename: 'test.html'
}),
new HtmlWebpackPrefixPlugin()
]
```
The html-webpack-prefix-plugin had default prefix attributes options
- img:src
- img:srcset
- img:data-src
- script:src
- link:href
If you want to remove and add attr you can set attributes options like so:
```javascript
new HtmlWebpackPlugin({
prefix: '//example.com/',
attrs : {
'img:src': false, //remove from default option
'img:data-url': true // add new attribute to field
}
})
```
If you only want to append attribute to default,
you can parse the Array to options like so:
```javascript
new HtmlWebpackPlugin({
prefix: '//xxx.xxx.com/',
attrs : ['img:url']
})
```