title: webpackHtmlPlugin: control the order of injected files
body: <p>I use <code>HtmlWebpackPlugin</code> for auto generate the <code>index.thml</code> with the output of webpack compile. </p>
  
  <p>for performance reason I split my entries to <em>vendors</em> and <em>project</em></p>
  
  <p>like that: </p>
  
  <pre><code>...
  entry:{
      vendors:'./vendors.js'
      ,TimerApp:'./src/index.js'
  
  },
  output:{
      path: path.join(__dirname,'build'),
      filename:'[name].js'
  },
  ...
  </code></pre>
  
  <p>when I run the project by <code>webpack-dev-server</code>:</p>
  
  <p><code>set NODE_ENV=development &amp;&amp; webpack-dev-server -d --hot --port 4040 --content-base src/"</code></p>
  
  <p>I get <code>index.html</code></p>
  
  <pre><code>&lt;head&gt;
  ...
      &lt;title&gt;Timer Task&lt;/title&gt;
      &lt;link href="vendors.css"  rel="stylesheet"&gt;
      &lt;link href="TimerApp.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body &gt;
   ...
  &lt;script src="vendors.js"&gt;&lt;/script&gt;
  &lt;script src="TimerApp.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p><code>verdor.js</code> first and <code>TimerApp.js</code> second. and that perfect.</p>
  
  <p>but.. when I use webpack:</p>
  
  <p><code>webpack --colors --watch --optimize-dedupe</code> </p>
  
  <p>the order is <code>TimerApp.js</code> first and <code>vendors.js</code> second 
  and that make exception every time project compiled</p>
  
  <p>very annoyed.</p>
  
  <p><strong>so, what is the way to control the order of the output files ??</strong> </p>
  
  <p>reference: <code>webpack.js</code> file:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  
  var exportRunTimeVariable = new webpack.DefinePlugin({
     MODE: {
      production: process.env.NODE_ENV === 'production'
     }
  });
  
  var extractSCSS =  new ExtractTextPlugin("[name].css");
  
  module.exports = {
      watch: true,
      devtool: 'source-map', /*devtool: 'inline-source-map'*/
      context: __dirname, /*for node key*/
      node:{
          __filename:true,
          __dirname:true
      },
      resolve: {
          root:[
              path.resolve('src')
              ,path.resolve('node_modules')
              ,path.resolve('bower_components')
          ]
          //root: __dirname + '/src'
      },
      entry:{
          vendors:'./vendors.js'
          ,TimerApp:'./src/index.js'
  
      },
      output:{
          path: path.join(__dirname,'build'),
          filename:'[name].js'
      },
      module:{
          loaders:[
              /*
              test: A condition that must be met
              exclude: A condition that must not be met
              include: A condition that must be met
              loader: A string of "!" separated loaders
              loaders: A array of loaders as string
              */
              {test:/\.css$/,
                  loader:extractSCSS.extract('style-loader?sourceMap','css-               loader!sass-loader')},
  
          {test: /\.scss$/,
              loader: extractSCSS.extract('style-loader?sourceMap','css-loader!sass-loader')},
  
          {test: /\.js$/,
              loader: 'ng-annotate',
              exclude: /node_modules|bower_components/},
  
          {test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
              loader : 'file-loader?name=res/[name].[ext]?[hash]'
          },
          //{test: /index\.html$/,
          //    loader : 'file-loader?name=[name].[ext]'
          //},
  
          {test: /\.html$/,
              loader: 'raw'
              ,exclude:[/index.html/]},
  
          {test: /\.json/,
              loader: 'json'}
  
      ]
  },
  plugins: [
      extractSCSS,
      exportRunTimeVariable,
      new ngAnnotatePlugin({
          add: true
              // other ng-annotate options here
          }),
          new HtmlWebpackPlugin({
              title: 'Timer Task'
              //,filename: ''
              ,template: 'src/index.html'
          })
      ]
  };
  </code></pre>