Upgraded html webpack plugin to 2.x and adapted template

dsebastien · Feb 5, 2016 · 066c358 · 066c358
1 parent 37f17fc
commit 066c358
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,9 @@ Check out the [upgrade](UPGRADE.md) page
 * npm publish
 
 ## TODO
+* upgrade webpack-dev-server to 2.0.0-beta
+  * test HMR
+  * should allow to automatically open the browser when the server starts
 * load immutable
 * fix e2e: https://github.com/AngularClass/angular2-webpack-starter/issues/264
 * add SASS/PostCSS support to production build
@@ -75,8 +78,10 @@ Check out the [upgrade](UPGRADE.md) page
 * add Lodash import (vendor.ts)
 * initialize Redux store
 * put back require.d.ts and remove custom one once that is merged: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/7049
-* find how to get hot module reloading (hmr) with the webpack-dev-server
-* find how to automatically open the browser when the server starts
+* fix production build
+  * https://github.com/erm0l0v/webpack-md5-hash/issues/1
+* extract build to a separate project
+* create a yeoman generator
 * finalize readme
   * add installation notes
   * add explanations of the setup

diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
         "webpack-dev-server": "1.14.x",
         "copy-webpack-plugin": "1.1.x",
         "extract-text-webpack-plugin": "1.0.x",
-        "html-webpack-plugin": "1.7.x",
+        "html-webpack-plugin": "2.8.x",
         "compression-webpack-plugin": "0.3.x",
         "webpack-md5-hash": "0.0.x",
         "raw-loader": "0.5.x",
@@ -125,6 +125,8 @@
         "build:prod": "webpack --config webpack.prod.config.js --progress --profile --colors --display-error-details --display-cached",
         "server": "npm run server:dev",
         "serve": "npm run server:dev",
+        "serve:dev": "npm run server:dev",
+        "serve:prod": "npm run server:prod",
         "server:dev": "webpack-dev-server --progress --profile --colors --display-error-details --display-cached --history-api-fallback --open --hot --inline --content-base src/",
         "server:prod": "http-server dist --cors",
         "webdriver:update": "webdriver-manager update",

diff --git a/src/index.html → src/index.ejs b/src/index.html → src/index.ejs
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="{%= o.webpackConfig.metadata.title %}">
+    <meta name="description" content="<%= webpackConfig.metadata.title %>">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- Disable tap highlight on IE -->
     <meta name="msapplication-tap-highlight" content="no">
@@ -27,24 +27,24 @@
     <!-- You can customize the default -->
     <meta name="theme-color" content="#656970">
 
-    <title>{%= o.webpackConfig.metadata.title %}</title>
+    <title><%= webpackConfig.metadata.title %></title>
 
     <!-- Stylesheets -->
     <!-- Generated CSS stylesheets will be added by webpack: extract-text-webpack-plugin -->
 
     <!-- base url -->
-    <base href="{%= o.webpackConfig.metadata.baseUrl %}">
+    <base href="<%- webpackConfig.metadata.baseUrl %>">
 </head>
 <body>
 <app>
     Loading ...
 </app>
 
-{% if (o.webpackConfig.metadata.ENV === 'development') { %}
+<% if (webpackConfig.metadata.ENV === "development") { %>
 <!-- Webpack Dev Server reload -->
 <script
-    src="http://{%= o.webpackConfig.metadata.host %}:{%= o.webpackConfig.metadata.port %}/webpack-dev-server.js"></script>
-{% } %}
+    src="http://<%- webpackConfig.metadata.host %>:<%- webpackConfig.metadata.port %>/webpack-dev-server.js"></script>
+<% } %>
 
 <!-- Generated bundle scripts will be injected by webpack: html-webpack-plugin -->
 </body>

diff --git a/webpack.config.js b/webpack.config.js
@@ -103,8 +103,7 @@ module.exports = {
         // generating html
         // Reference: https://github.com/ampedandwired/html-webpack-plugin
         new HtmlWebpackPlugin({
-            template: "src/index.html",
-            inject: "body"
+            template: "src/index.ejs" // renamed to avoid that the html loader interferes
         }),
         // replace
         new webpack.DefinePlugin({

diff --git a/webpack.prod.config.js b/webpack.prod.config.js
@@ -123,7 +123,9 @@ module.exports = {
     },
 
     plugins: [
+        // md5 content hashes
         new WebpackMd5Hash(),
+        // optimization
         new DedupePlugin(),
         new OccurenceOrderPlugin(true),
         new CommonsChunkPlugin({
@@ -140,7 +142,7 @@ module.exports = {
         ]),
         // generating html
         new HtmlWebpackPlugin({
-            template: "src/index.html"
+            template: "src/index.ejs" // renamed to avoid that the html loader interferes
         }),
         new DefinePlugin({
             // Environment helpers