├── .gitignore
├── IndexHtmlSource.js
├── LICENSE
├── README.md
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | .*
 2 | !.gitignore
 3 | 
 4 | *.iml
 5 | 
 6 | # Logs
 7 | logs
 8 | *.log
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | 
15 | # Directory for instrumented libs generated by jscoverage/JSCover
16 | lib-cov
17 | 
18 | # Coverage directory used by tools like istanbul
19 | coverage
20 | 
21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
22 | .grunt
23 | 
24 | # node-waf configuration
25 | .lock-wscript
26 | 
27 | # Compiled binary addons (http://nodejs.org/api/addons.html)
28 | build/Release
29 | 
30 | # Dependency directory
31 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
32 | node_modules
33 | 


--------------------------------------------------------------------------------
/IndexHtmlSource.js:
--------------------------------------------------------------------------------
  1 | var path = require('path');
  2 | var cheerio = require('cheerio');
  3 | var URI = require('URIjs');
  4 | var _ = require('lodash');
  5 | var Source = require('webpack/lib/Source');
  6 | 
  7 | /**
  8 |  * @class
  9 |  * @extends Source
 10 |  * @param {Module} sourceModule
 11 |  * @param {Chunk} sourceChunk
 12 |  * @param {Compilation} compilation
 13 |  */
 14 | function IndexHtmlSource(sourceModule, sourceChunk, compilation) {
 15 |     this.sourceModule = sourceModule;
 16 |     this.sourceChunk = sourceChunk;
 17 |     this.compilation = compilation;
 18 | }
 19 | module.exports = IndexHtmlSource;
 20 | 
 21 | IndexHtmlSource.prototype = Object.create(Source.prototype);
 22 | IndexHtmlSource.prototype.constructor = IndexHtmlSource;
 23 | 
 24 | IndexHtmlSource.prototype.source = function() {
 25 |     var html = this._getHtmlFromModule();
 26 |     var $ = cheerio.load(html);
 27 |     coalesceLinks($);
 28 |     this._resolveScripts($);
 29 |     return $.html();
 30 | };
 31 | 
 32 | 
 33 | /**
 34 |  * Extracts the HTML code from the module source
 35 |  */
 36 | IndexHtmlSource.prototype._getHtmlFromModule = function() {
 37 | 
 38 |     var compilation = this.compilation;
 39 |     var sourceChunk = this.sourceChunk;
 40 | 
 41 | 
 42 |     function moduleWasExtracted(module) {
 43 |         return module.loaders && module.loaders.some(function(loader) {
 44 |                 return loader.match(/extract-text-webpack-plugin/);
 45 |             })
 46 |     }
 47 | 
 48 | 
 49 |     function getExtractTextLoaderOptions(module) {
 50 |         for (var i = 0; i < module.loaders.length; i++) {
 51 |             var loader = module.loaders[i];
 52 |             var match = loader.match(/extract-text-webpack-plugin[\\/]loader\.js\?({.*})/);
 53 |             if (match) {
 54 |                 return JSON.parse(match[1]);
 55 |             }
 56 |         }
 57 |     }
 58 | 
 59 | 
 60 |     function getExtractedFilename(module) {
 61 | 
 62 |         var options = getExtractTextLoaderOptions(module);
 63 |         var loaderId = options && options.id;
 64 | 
 65 |         var extractTextPlugin = _.find(compilation.compiler.options.plugins,
 66 |             function (p) {
 67 |                 return (p.constructor.name === 'ExtractTextPlugin') &&
 68 |                     ((typeof(p.id) === "undefined" && typeof(loaderId) === "undefined") || (p.id === loaderId));
 69 |             });
 70 | 
 71 |         var filenamePattern = extractTextPlugin.filename
 72 |             .replace(/\[(?:\w+:)?(contenthash)(?::[a-z]+\d*)?(?::(\d+))?]|([^\[\]]+)/ig,
 73 |             function(match, contentHash, maxLength, literalPart) {
 74 |                 if (contentHash) {
 75 |                     if (maxLength) {
 76 |                         return '[a-f0-9]{1,' + maxLength + '}';
 77 |                     } else {
 78 |                         return '[a-f0-9]+';
 79 |                     }
 80 |                 } else {
 81 |                     return regexpQuote(literalPart);
 82 |                 }
 83 |             });
 84 |         filenamePattern = new RegExp(filenamePattern);
 85 | 
 86 |         return _.find(sourceChunk.files, function(filename) {
 87 |             return filename.match(filenamePattern);
 88 |         });
 89 |     }
 90 | 
 91 | 
 92 |     function __webpack_require__(moduleId) {
 93 | 
 94 |         var sourceModule;
 95 |         if (typeof moduleId === "number") {
 96 |             sourceModule = _.find(compilation.modules, function (m) {
 97 |                 return m.id === moduleId;
 98 |             });
 99 |         } else {
100 |             sourceModule = moduleId;
101 |         }
102 | 
103 |         if (!sourceModule) {
104 |             return undefined;
105 |         }
106 | 
107 |         if (_.endsWith(sourceModule.context, path.normalize('webpack-dev-server/client')) ||
108 |             _.endsWith(sourceModule.context, path.normalize('webpack/hot'))) {
109 |             return undefined;
110 | 
111 |         } else if (moduleWasExtracted(sourceModule)) {
112 |             return (compilation.options.output.publicPath || '') + getExtractedFilename(sourceModule);
113 | 
114 |         } else {
115 |             var module = {};
116 | 
117 |             var source = sourceModule.source(null, {});
118 |             eval(source.source());
119 | 
120 |             return module.exports;
121 |         }
122 |     }
123 | 
124 |     // This is where the "real" __webpack_require__ would store the public path,
125 |     // it is used by url-loader to construct the link
126 |     __webpack_require__.p = compilation.options.output.publicPath || '';
127 | 
128 |     return __webpack_require__(this.sourceModule);
129 | };
130 | 
131 | 
132 | /**
133 |  * Resolve <script> tags that refer to entry points by replacing them with the final names of the bundles.
134 |  * @param $
135 |  */
136 | IndexHtmlSource.prototype._resolveScripts = function($) {
137 | 
138 |     var compilation = this.compilation;
139 |     var sourceContext = this.sourceModule.context;
140 | 
141 |     $('script').each(function () {
142 |         var scriptSrc = $(this).attr('src');
143 |         if (scriptSrc) {
144 |             var scriptSrcUri = new URI(scriptSrc);
145 |             if (!scriptSrcUri.is('absolute')) {
146 | 
147 |                 var entry = path.resolve(sourceContext, scriptSrc);
148 |                 var moduleForEntry = _.find(compilation.modules, function (module) {
149 |                     return module.resource && path.normalize(module.resource) === entry
150 |                 });
151 |                 if (moduleForEntry) {
152 |                     var chunkForEntry = moduleForEntry.chunks[0];
153 |                     var chunkJsFile = _.find(chunkForEntry.files, function (file) {
154 |                         return new URI(file).filename().match(/\.js$/)
155 |                     });
156 |                     if (chunkJsFile) {
157 |                         $(this).attr('src', (compilation.options.output.publicPath || '') + chunkJsFile);
158 |                     }
159 |                 }
160 |             }
161 |         }
162 |     });
163 | };
164 | 
165 | 
166 | function regexpQuote(s) {
167 |     return s.toString().replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
168 | }
169 | 
170 | 
171 | /**
172 |  * Coalesce all links with the same rel and href into one
173 |  * @param $
174 |  */
175 | function coalesceLinks($) {
176 |     $('link').each(function () {
177 |         var rel = $(this).attr('rel');
178 |         var href = $(this).attr('href');
179 |         $(this).nextAll("link[rel='" + rel + "'][href='" + href + "']").remove();
180 |     });
181 | }
182 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 unbroken-dome
 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 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Index HTML plugin for webpack
  2 | 
  3 | ## Motivation
  4 | 
  5 | One of the "entry points" to a web application is typically the index.html file, but entry points in webpack can
  6 | only produce Javascript assets. With this plugin it is possible to produce a .html asset instead.
  7 | 
  8 | ## Features
  9 | 
 10 | * Allows an entry point for a .html file to produce an .html asset
 11 | * Replaces references to Javascript entry points (`<script src="...">`) with the references to the bundled assets
 12 | 
 13 | ## Installation
 14 | 
 15 |     npm install --save-dev indexhtml-webpack-plugin
 16 | 
 17 | ## Usage
 18 | 
 19 | Declare your index.html as an entry point in your `webpack.config.js` file:
 20 | 
 21 | ```javascript
 22 | module.exports = {
 23 | 
 24 |     entry: {
 25 |         'index.html': './index.html'
 26 |     }
 27 |     
 28 |     // ...
 29 | }
 30 | ```
 31 | 
 32 | Add the [html loader](https://github.com/webpack/html-loader) for index.html. 
 33 | 
 34 | ```javascript
 35 | module.exports = {
 36 |     // ...
 37 | 
 38 |     module: {
 39 |         loaders: [
 40 |             {
 41 |                 test: /index\.html$/,
 42 |                 loader: 'html'
 43 |             },
 44 |             
 45 |             // If you have any other loaders that match HTML files, make sure to exclude index.html from their pattern
 46 |             {
 47 |                 test: /\.html$/,
 48 |                 exclude: /index\.html$/,
 49 |                 loader: /* ... */
 50 |             }
 51 |         ]
 52 |     }
 53 |     
 54 |     // ...
 55 | }
 56 | ```
 57 | 
 58 | Add the `IndexHtmlPlugin`. It takes the names of the source file and target file as parameters.
 59 | 
 60 | ```javascript
 61 | var IndexHtmlPlugin = require('indexhtml-webpack-plugin');
 62 | 
 63 | module.exports = {
 64 |     // ...
 65 |     
 66 |     plugins: [
 67 |         new IndexHtmlPlugin('index.html', 'index.html')
 68 |     ]
 69 |     
 70 |     // ...
 71 | }
 72 | ```
 73 | 
 74 | ### Using with CSS
 75 | 
 76 | You can use the HTML loader to detect links to external resources (like stylesheets), so they will become dependencies
 77 | of the "index.html" module. Use the [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin)
 78 | to extract these stylesheets into separate files.
 79 | 
 80 | If you have multiple &lt;link&gt; tags that reference external stylesheet, these stylesheets might actually end up in the
 81 | same bundled asset. The plugin will automatically coalesce all `<link>` tags with the same `rel` and `href` attributes
 82 | into one.
 83 | 
 84 | Example webpack.config.js:
 85 | 
 86 | ```javascript
 87 | var ExtractTextPlugin = require('extract-text-webpack-plugin'),
 88 |     IndexHtmlPlugin = require('indexhtml-webpack-plugin');
 89 |     
 90 | var cssExtractPlugin = new ExtractTextPlugin('styles/[contenthash:16].css');
 91 | 
 92 | module.exports = {
 93 |     context: path.resolve(__dirname, 'src'),
 94 |     
 95 |     entry: {
 96 |         'index.html': './index.html',
 97 |         app: './app.js'
 98 |     }
 99 |     
100 |     module: {
101 |         loaders: [
102 |             {
103 |                 test: /index\.html$/,
104 |                 loader: 'html?attrs=link:href'
105 |             },
106 |             {
107 |                 test: /\.js$/,
108 |                 exclude: /(node_modules|bower_components)/,
109 |                 loader: 'jshint'
110 |             },
111 |             {
112 |                 test: /\.css$/,
113 |                 loader: cssExtractPlugin.extract('style', 'css')
114 |             }
115 |         ]
116 |     },
117 |     
118 |     plugins: [
119 |         cssExtractPlugin,
120 |         new IndexHtmlPlugin('index.html', 'index.html')
121 |     ]
122 | };
123 | ```
124 | 
125 | ## License
126 | 
127 | MIT (http://www.opensource.org/licenses/mit-license.php)


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var IndexHtmlSource = require('./IndexHtmlSource');
 2 | 
 3 | 
 4 | function IndexHtmlPlugin(source, target) {
 5 | 
 6 |     this.apply = function apply(compiler) {
 7 | 
 8 |         compiler.plugin('this-compilation', function (compilation) {
 9 | 
10 |             compilation.plugin('additional-chunk-assets', function additionalChunkAssets() {
11 | 
12 |                 var sourceChunk = this.namedChunks[source];
13 |                 var sourceModule = sourceChunk.origins[0].module;
14 | 
15 |                 var filePath = this.getPath(target, {chunk: sourceChunk});
16 |                 this.additionalChunkAssets.push(filePath);
17 |                 this.assets[filePath] = new IndexHtmlSource(sourceModule, sourceChunk, this);
18 |                 sourceChunk.files.push(filePath);
19 |             });
20 |         });
21 | 
22 |         compiler.plugin('emit', function emit(compilation, callback) {
23 | 
24 |             Object.keys(compilation.assets).forEach(function (file) {
25 | 
26 |                 var targetFile = file;
27 |                 var queryStringIdx = targetFile.indexOf('?');
28 |                 if (queryStringIdx >= 0) {
29 |                     targetFile = targetFile.substr(0, queryStringIdx);
30 |                 }
31 | 
32 |                 if (targetFile === source + '.js' || targetFile === source + '.js.map') {
33 |                     delete compilation.assets[file];
34 |                 }
35 |             });
36 | 
37 |             callback();
38 |         });
39 |     };
40 | }
41 | 
42 | 
43 | module.exports = IndexHtmlPlugin;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "indexhtml-webpack-plugin",
 3 |   "version": "0.1.9",
 4 |   "description": "Index HTML plugin for Webpack",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+ssh://git@github.com/unbroken-dome/indexhtml-webpack-plugin.git"
12 |   },
13 |   "keywords": [
14 |     "webpack"
15 |   ],
16 |   "author": "Till Krullmann",
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/unbroken-dome/indexhtml-webpack-plugin/issues"
20 |   },
21 |   "homepage": "https://github.com/unbroken-dome/indexhtml-webpack-plugin#readme",
22 |   "devDependencies": {},
23 |   "dependencies": {
24 |     "URIjs": "^1.16.0",
25 |     "cheerio": "^0.19.0",
26 |     "lodash": "^3.10.1",
27 |     "webpack": "^1.11.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------