Skip to content

Commit 02e262d

Browse files
SimenBSimenB
committed
Initial commit
0 parents  commit 02e262d

File tree

10 files changed

+263
-0
lines changed

10 files changed

+263
-0
lines changed

‎.babelrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": [
3+
"es2015"
4+
],
5+
"plugins": [
6+
"babel-plugin-add-module-exports"
7+
]
8+
}

‎.editorconfig‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
10+
[*.md]
11+
trim_trailing_whitespace = false

‎.eslintrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "standard"
3+
}

‎.gitattributes‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=autos

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
index.js
2+
3+
node_modules/
4+
.idea/
5+
*.log

‎.hound.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
javascript:
2+
enabled: false
3+
eslint:
4+
enabled: true
5+
config_file: .eslintrc

‎LICENSE‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 Simen Bekkhus
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.
22+

‎README.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
# add-asset-html-webpack-plugin
2+
> Add a JavaScript or CSS asset to the HTML generated by `html-webpack-plugin`
3+
4+
[![NPM Version][npm-image]][npm-url]
5+
6+
[![Dependency Status][david-image]][david-url]
7+
[![Dev Dependency Status][david-dev-image]][david-dev-url]
8+
[![Peer Dependency Status][david-peer-image]][david-peer-url]
9+
10+
## Installation
11+
Install the plugin with `npm`:
12+
```sh
13+
$ npm i add-asset-html-webpack-plugin -D
14+
```
15+
16+
## Basic Usage
17+
The plugin will add the given JS or CSS file to the files Webpack knows about, and put it into the list of assets
18+
`html-webpack-plugin` injects into the generated html. Add the plugin the your config, providing it a filename:
19+
20+
```js
21+
var HtmlWebpackPlugin = require('html-webpack-plugin')
22+
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
23+
var webpackConfig = {
24+
entry: 'index.js',
25+
output: {
26+
path: 'dist',
27+
filename: 'index_bundle.js'
28+
},
29+
plugins: [
30+
new HtmlWebpackPlugin(),
31+
new AddAssetHtmlPlugin({ filename: require.resolve('./some-file') })
32+
]
33+
}
34+
```
35+
36+
This will add a script tag to the HTML generated by `html-webpack-plugin`, and look like:
37+
```html
38+
<!DOCTYPE html>
39+
<html>
40+
<head>
41+
<meta charset="UTF-8">
42+
<title>Webpack App</title>
43+
</head>
44+
<body>
45+
<script src="index_bundle.js"></script>
46+
<script src="some-file.js"></script>
47+
</body>
48+
</html>
49+
```
50+
51+
## Options
52+
Options are passed to the plugin during instantiation.
53+
54+
```js
55+
new AddAssetHtmlPlugin({ filename: require.resolve('./some-file') })
56+
```
57+
58+
#### `filename`
59+
Type: `string`, mandatory
60+
61+
The absolute path of the file you want to add to the compilation, and resulting HTML file.
62+
63+
#### `includeSourcemap`
64+
Type: `boolean`, default: `false`
65+
66+
If `true`, will add `filename + '.map'` to the compilation as well.
67+
68+
#### `typeOfAsset`
69+
Type: `string`, default: `js`
70+
71+
Can be set to `css` to create a `link`-tag instead of a `script`-tag.
72+
73+
## Examples
74+
### Add a DLL file from webpack.DllPlugin
75+
Note: Remember to build the DLL file in a separate build.
76+
77+
When adding assets, it's added to the start of the array, so when
78+
`html-webpack-plugin` injects the assets, it's before other assets. If you
79+
depend on some order for the assets beyond that, you'll have to create some
80+
sort of intermediate file in the given order.
81+
82+
#### Webpack config
83+
```js
84+
var path = require('path')
85+
var webpack = require('webpack')
86+
var webpackConfig = {
87+
entry: {
88+
vendor: ['react', 'redux', 'react-router']
89+
},
90+
devtool: '#source-map',
91+
output: {
92+
path: path.join(__dirname, 'build'),
93+
filename: '[name].dll.js',
94+
library: '[name]_[hash]'
95+
},
96+
plugins: [
97+
new webpack.DllPlugin({
98+
path: path.join(__dirname, 'build', '[name]-manifest.json'),
99+
name: '[name]_[hash]'
100+
}),
101+
],
102+
}
103+
```
104+
105+
Your main build:
106+
```js
107+
var path = require('path')
108+
var webpack = require('webpack')
109+
var HtmlWebpackPlugin = require('html-webpack-plugin')
110+
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
111+
var webpackConfig = {
112+
entry: 'index.js',
113+
output: {
114+
path: 'dist',
115+
filename: 'index_bundle.js'
116+
},
117+
plugins: [
118+
new webpack.DllReferencePlugin({
119+
context: path.join(__dirname),
120+
manifest: require('./build/vendor-manifest.json')
121+
}),
122+
new HtmlWebpackPlugin(),
123+
new AddAssetHtmlPlugin({
124+
filename: require.resolve('./build/vendor.dll.js'),
125+
includeSourcemap: true
126+
})
127+
]
128+
}
129+
```
130+
131+
132+
[npm-url]: https://npmjs.org/package/add-asset-html-webpack-plugin
133+
[npm-image]: https://img.shields.io/npm/v/add-asset-html-webpack-plugin.svg
134+
[david-url]: https://david-dm.org/SimenB/add-asset-html-webpack-plugin
135+
[david-image]: https://img.shields.io/david/SimenB/add-asset-html-webpack-plugin.svg
136+
[david-dev-url]: https://david-dm.org/SimenB/add-asset-html-webpack-plugin#info=devDependencies
137+
[david-dev-image]: https://img.shields.io/david/dev/SimenB/add-asset-html-webpack-plugin.svg
138+
[david-peer-url]: https://david-dm.org/SimenB/add-asset-html-webpack-plugin#info=peerDependencies
139+
[david-peer-image]: https://img.shields.io/david/peer/SimenB/add-asset-html-webpack-plugin.svg

‎addAssetHtmlPlugin.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export default class AddAssetHtmlPlugin {
2+
constructor ({
3+
filename,
4+
includeSourcemap = false,
5+
typeOfAsset = 'js'
6+
} = {}) {
7+
this.filename = filename
8+
this.includeSourcemap = includeSourcemap
9+
this.typeOfAsset = typeOfAsset
10+
}
11+
12+
apply (compiler) {
13+
compiler.plugin('compilation', (compilation) => {
14+
if (!this.filename) return compilation.errors.push(new Error('No filename defined'))
15+
16+
compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, callback) => {
17+
htmlPluginData.plugin.addFileToAssets(this.filename, compilation)
18+
.then((filename) => htmlPluginData.assets[this.typeOfAsset].unshift(`/${filename}`))
19+
.then(() => {
20+
if (this.includeSourcemap) {
21+
return htmlPluginData.plugin.addFileToAssets(`${this.filename}.map`, compilation)
22+
}
23+
})
24+
.then(() => callback())
25+
})
26+
})
27+
}
28+
}

‎package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "add-asset-html-webpack-plugin",
3+
"version": "0.0.1",
4+
"description": "Add a JS or CSS assets to a generated HTML file",
5+
"files": [
6+
"index.js"
7+
],
8+
"scripts": {
9+
"compile": "babel addAssetHtmlPlugin.js -o index.js",
10+
"lint": "standard",
11+
"prepublish": "not-in-install && npm run compile || echo this is npm install",
12+
"test": "npm run lint"
13+
},
14+
"repository": "SimenB/dll-html-webpack-plugin",
15+
"keywords": [
16+
"dll",
17+
"html-webpack-plugin",
18+
"webpack"
19+
],
20+
"author": "Simen Bekkhus <[email protected]>",
21+
"license": "MIT",
22+
"bugs": {
23+
"url": "https://github.com/SimenB/add-asset-html-webpack-plugin/issues"
24+
},
25+
"homepage": "https://github.com/SimenB/add-asset-html-webpack-plugin#readme",
26+
"dependencies": {},
27+
"devDependencies": {
28+
"babel-cli": "^6.4.5",
29+
"babel-plugin-add-module-exports": "^0.1.2",
30+
"babel-preset-es2015": "^6.3.13",
31+
"codeclimate-test-reporter": "^0.3.1",
32+
"coveralls": "^2.11.6",
33+
"html-webpack-plugin": "^2.3.0",
34+
"in-publish": "^2.0.0",
35+
"standard": "^6.0.1"
36+
},
37+
"peerDependencies": {
38+
"html-webpack-plugin": "^2.3.0"
39+
}
40+
}

0 commit comments

Comments
 (0)