https://github.com/mwumli/html-webpack-alter-asset-plugin
Allow plugins to make changes to the assets before invoking the template when using html-webpack-plugin
https://github.com/mwumli/html-webpack-alter-asset-plugin
Last synced: about 2 months ago
JSON representation
Allow plugins to make changes to the assets before invoking the template when using html-webpack-plugin
- Host: GitHub
- URL: https://github.com/mwumli/html-webpack-alter-asset-plugin
- Owner: MwumLi
- License: mit
- Created: 2016-09-15T05:59:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-22T05:50:24.000Z (over 6 years ago)
- Last Synced: 2024-10-12T14:28:43.170Z (8 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/html-webpack-alter-asset-plugin
- Size: 6.84 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-webpack-alter-asset-plugin
Allow plugins to make changes to the assets before invoking the template when using [html-webpack-plugin][html-webpack-plugin]
## Introduce
In some case, we want to make some changes to static resources(js and css) before inserting it into the output file, such as:
* spectify the order of js and css, it cann't meet our expectations to use the option `chunksSortMode` from [html-webpack-plugin][html-webpack-plugin]
* Insert additional static resources, which not introduced in the webpack
...
Based on the above requirements, I finished it!
## Installation
You must be running webpack on node 4.3 or higher
Install the plugin with npm:
$ npm install --save-dev html-webpack-alter-asset-plugin
## Basic Usage
webpack.config.js :
"use strict";
let HtmlWebpackPlugin = require('html-webpack-plugin');
let htmlWebpackAlterAssetPlugin = require('html-webpack-alter-asset-plugin');
...
module.exports = {
entry: {
"vendor": path.resolve(BASE_PATH, 'vendor.browser.js'),
"polyfills": path.resolve(BASE_PATH, 'polyfills.browser.js'),
"app": path.resolve(BASE_PATH, 'app.js'),
"style": path.resolve(BASE_PATH, 'style.js'),
"vnc": path.resolve(BASE_PATH, 'vnc.js'),
"register": path.resolve(BASE_PATH, 'register.js'),
},
...
plugins: {
new HtmlWebpackPlugin({
template: './src/app/app.html',
filename: 'tpl/index.html',
injectAlter: {
js: {
keys: [ '~/system.json', 'commons', 'vendor', 'style', 'polyfills', 'app' ]
}
}
}),
new htmlWebpackAlterAssetPlugin()
}
...
}
After run webpack, `` tag is below in the ouput html `tpl/index.html`:
<html>
<head>
...
</head>
<body>
<app></app>
<script type="text/javascript" src="/system.json">