Use previous html-plugin

Due to indexhtml-webpack-plugin masking some errors, the previous html-plugin will be used, until unbroken-dome/indexhtml-webpack-plugin#11 is solved.
nihey · Jul 16, 2016 · 44e6264 · 44e6264
1 parent b64c13f
commit 44e6264
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,8 @@ The general directory structure is:
 ├── index.html
 ├── package.json
 ├── environment.json
+├── plugins/
+│   └── html-plugin.js
 ├── README.md
 ├── scripts/
 │   └── index.js
@@ -36,23 +38,24 @@ The general directory structure is:
 - Your style entry point is `styles/index.less`
 - 'environment.json' file provides optional environment variable settings,
   but you can delete it if you don't need it.
+- The `plugins/html-plugin.js` file is better explained on the *About* section,
+  with the `html-parser-plugin` plugin.
 
-This uses the [indexhtml-webpack-plugin](https://github.com/unbroken-dome/indexhtml-webpack-plugin)
-to build HTML files, replacing the `src` and `href` tags related to images, css,
-and scripts into their corresponding file in `dist` directory. This way, an
+There's a hack to build HTML files, replacing the `src` and `href` tags related
+to images into their corresponding file in `dist` directory. This way, a
 `index.html` file that looks like this:
 
 ```
 <!DOCTYPE html>
 <html>
   <head>
     <title>Sample App</title>
-    <meta charset="utf-8">
-    <link href="assets/images/favicon.png" rel="icon">
-    <link href="styles/index.less" rel="stylesheet">
+    <meta charset="utf-8"/>
+    <link href="!assets/image/favicon.png" rel="icon"/>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <script src="scripts/index.js"></script>
+    <script src="script.js"></script>
   </body>
 </html>
 ```
@@ -66,14 +69,19 @@ Becomes this:
     <title>Sample App</title>
     <meta charset="utf-8">
     <link href="84eafba88857e5fd2e85d63beaf3fb31.png" rel="icon">
-    <link href="d41d8cd98f00b204e9800998ecf8427e.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <script src="script.js"></script>
   </body>
 </html>
 ```
 
+Notice that the `favicon.png` file was replaced with
+`84eafba88857e5fd2e85d63beaf3fb31.png`. [indexhtml-webpack-plugin](https://github.com/unbroken-dome/indexhtml-webpack-plugin)
+parses your `index.html` content and properly replace it on your
+`dist/index.html`.
+
 # About
 
 This boilerplate includes the following loaders:
@@ -85,10 +93,13 @@ This boilerplate includes the following loaders:
   - `less-loader`: Style your pages with [less](http://lesscss.org/).
   - `style-loader`: Add exports of a module as style to DOM.
 
-It also uses the following plugins:
+It also includes the following plugins:
 
   - `indexhtml-webpack-plugin`: Parses your html files content and build them.
   - `extract-text-webpack-plugin`: Extract css text from bundled styles.
+  - `html-parser-plugin`: Custom experimental plugin to enable html parsing
+                          on webpack. It is used to emit a `index.html` file
+                          along with it's images.
 
 # License
 

diff --git a/index.html b/index.html
@@ -3,10 +3,10 @@
   <head>
     <title>Sample App</title>
     <meta charset="utf-8">
-    <link href="assets/images/favicon.png" rel="icon">
-    <link href="styles/index.less" rel="stylesheet">
+    <link href="!assets/images/favicon.png" rel="icon">
+    <link href="style.css" rel="stylesheet">
   </head>
   <body>
-    <script src="scripts/index.js"></script>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -16,27 +16,28 @@
     "less"
   ],
   "author": "Nihey Takizawa <[email protected]>",
-  "license": "MIT",
+  "license": "CC0-1.0",
   "dependencies": {
     "babel-core": "^6.3.13",
     "babel-loader": "^6.2.0",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
+    "cheerio": "^0.20.0",
     "config": "^1.16.0",
     "css-loader": "^0.23.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
+    "html-minifier": "^3.0.1",
     "img-loader": "^1.1.0",
     "json-loader": "^0.5.2",
     "less": "^2.5.1",
     "less-loader": "^2.2.0",
+    "md5": "^2.1.0",
     "node-libs-browser": "^1.0.0",
     "style-loader": "^0.13.0",
     "webpack": "^1.10.1"
   },
   "devDependencies": {
-    "eslint": "^1.6.0",
-    "html-loader": "^0.4.3",
-    "indexhtml-webpack-plugin": "^0.1.9"
+    "eslint": "^1.6.0"
   }
 }
diff --git a/plugins/html-plugin.js b/plugins/html-plugin.js
@@ -0,0 +1,80 @@
+/* XXX This code is experimental, it may be subjected to great changes on the
+ * near future.
+ */
+var $ = require('cheerio'),
+    md5 = require('md5'),
+    htmlMinify = require('html-minifier').minify,
+    fs = require('fs'),
+    path = require('path');
+
+function HtmlParserWebpackPlugin() {
+  this.files = Array.prototype.slice.call(arguments);
+  this.production = false;
+}
+
+HtmlParserWebpackPlugin.prototype.apply = function(compiler) {
+  this.compiler = compiler;
+  // XXX I could try to find a better way to check this.
+  // Note: 'compiler.options.debug' options is not ovewritten by cli options
+  // when it is on 'webpack.config.js'.
+  this.production = process.argv.indexOf('--optimize-minimize') !== -1 ||
+                    process.argv.indexOf('-p') !== -1;
+  this.files.forEach(function(file) {
+    compiler.plugin('emit', this.compile.bind(this, file));
+  }, this);
+};
+
+/* Iterate through each element href and src tags and parse them */
+HtmlParserWebpackPlugin.prototype.compile = function(file, compilation, callback) {
+  var input = path.join(this.compiler.context, file);
+  var html = $.load(fs.readFileSync(input));
+  html('[href],[src]').each(function(i, element) {
+    this.parse(element, 'href', compilation);
+    this.parse(element, 'src', compilation);
+  }.bind(this));
+
+  var htmlSource = html.html();
+  if (this.production) {
+    htmlSource = htmlMinify(htmlSource, {
+      preserveLineBreaks: false,
+      removeComments: true,
+      removeCommentsFromCDATA: true,
+      collapseWhitespace: true,
+    });
+  }
+  this.createFile(compilation, file, htmlSource);
+  callback();
+};
+
+/* If the elementh with the tag includes a '!' prefix, it should be emitted */
+HtmlParserWebpackPlugin.prototype.parse = function(element, attr, compilation) {
+  var file = $(element).attr(attr);
+  // If the element does not have a valid href or src, or if it does not
+  // require bundling, don't do anything.
+  if (!file || file[0] !== '!') {
+    return;
+  }
+  $(element).attr(attr, this.emit(file.substring(1), compilation));
+};
+
+/* Create a file on the dist directory for the resource with a md5 name */
+HtmlParserWebpackPlugin.prototype.emit = function(url, compilation) {
+  var ext = url.split('.')[1];
+  var source = fs.readFileSync(path.join(this.compiler.context, url));
+  var filename = md5(source) + '.' + ext;
+  this.createFile(compilation, filename, source);
+  return filename;
+};
+
+HtmlParserWebpackPlugin.prototype.createFile = function(compilation, name, source) {
+  compilation.assets[name] = {
+    source: function() {
+      return source;
+    },
+    size: function() {
+      return source.length;
+    },
+  };
+};
+
+module.exports = HtmlParserWebpackPlugin;
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,14 +1,14 @@
 var webpack = require('webpack'),
     ExtractTextPlugin = require('extract-text-webpack-plugin'),
-    IndexHtmlPlugin = require('indexhtml-webpack-plugin'),
+    HtmlPlugin = require('./plugins/html-plugin'),
     path = require('path');
 
-var cssExtractTextPlugin = new ExtractTextPlugin('[contenthash].css');
+var cssExtractTextPlugin = new ExtractTextPlugin('[name].css');
 
 module.exports = {
   entry: {
     'script': './scripts/index.js',
-    'index.html': './index.html',
+    'style': './styles/index.less',
   },
 
   module: {
@@ -25,16 +25,12 @@ module.exports = {
         test: /\.less$/,
         loader: cssExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
       },
-      {
-        test: /\.html$/,
-        loader: 'html?attrs=link:href img:src',
-      },
     ],
   },
 
   plugins: [
     cssExtractTextPlugin,
-    new IndexHtmlPlugin('index.html', 'index.html'),
+    new HtmlPlugin('index.html'),
     new webpack.DefinePlugin({
       Environment: JSON.stringify(require('config')),
     }),