Initial commit for integrating html-webpack-plugin #49

conf/webpack/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "strict": 0,
+    "import/no-extraneous-dependencies": 0
+  }
+}

conf/webpack/Base.js

@@ -4,6 +4,8 @@
  * Webpack configuration base class
  */
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
 const npmBase = path.join(__dirname, '../../node_modules');
 
 class WebpackBaseConfig {
@@ -12,6 +14,26 @@ class WebpackBaseConfig {
     this._config = {};
   }
 
+  /**
+   * Get a pre-configured instance of the HtmlPluginWebpack plugin
+   * @return {HtmlWebpackPlugin}
+   */
+  get pluginHtmlWebpack() {
+    return new HtmlWebpackPlugin({
+      appMountId: 'app',
+      filename: 'index.html',
+      hash: true,
+      inject: false,
+      lang: 'en',
+      minify: {
+        collapseWhitespace: true,
+        removeComments: true
+      },
+      title: 'Generator React Webpack',
+      template: 'templates/index.ejs'
+    });
+  }
+
   /**
    * Get the list of included packages
    * @return {Array} List of included packages
@@ -74,7 +96,7 @@ class WebpackBaseConfig {
       devtool: 'eval',
       devServer: {
         contentBase: './src/',
-        publicPath: '/assets/',
+        publicPath: '/',
         historyApiFallback: true,
         hot: true,
         inline: true,
@@ -154,7 +176,7 @@ class WebpackBaseConfig {
           },
           {
             test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
-            loaders: ['file']
+            loaders: ['file?name=assets/[hash].[ext]']
           },
           {
             test: /\.json$/,
@@ -171,9 +193,9 @@ class WebpackBaseConfig {
         ]
       },
       output: {
-        path: path.resolve('./dist/assets'),
-        filename: 'app.js',
-        publicPath: './assets/'
+        path: path.resolve('./dist'),
+        filename: 'assets/app.js',
+        publicPath: '/'
       },
       plugins: [],
       resolve: {

conf/webpack/Dev.js

@@ -18,6 +18,7 @@ class WebpackDevConfig extends WebpackBaseConfig {
         './client.js'
       ],
       plugins: [
+        super.pluginHtmlWebpack,
         new webpack.HotModuleReplacementPlugin(),
         new webpack.NoErrorsPlugin()
       ]

conf/webpack/Dist.js

@@ -18,6 +18,7 @@ class WebpackDistConfig extends WebpackBaseConfig {
         new webpack.DefinePlugin({
           'process.env.NODE_ENV': '"production"'
         }),
+        super.pluginHtmlWebpack,
         new webpack.optimize.DedupePlugin(),
         new webpack.optimize.AggressiveMergingPlugin(),
         new webpack.NoErrorsPlugin()

conf/webpack/Test.js

@@ -55,7 +55,8 @@ class WebpackTestConfig extends WebpackBaseConfig {
       plugins: [
         new webpack.DefinePlugin({
           'process.env.NODE_ENV': '"test"'
-        })
+        }),
+        super.pluginHtmlWebpack
       ]
     };
   }

package.json

@@ -8,12 +8,12 @@
     "test": "cross-env NODE_ENV=test karma start",
     "posttest": "npm run lint",
     "test:watch": "cross-env NODE_ENV=test karma start --autoWatch=true --singleRun=false --reporters=mocha,coverage",
-    "serve:dev": "webpack-dev-server --open --env dev",
-    "serve:dist": "webpack-dev-server --open --env dist -p --progress",
+    "serve:dev": "webpack-dev-server --env dev",
+    "serve:dist": "webpack-dev-server --env dist -p --progress",
     "dist": "npm run clean && npm run copy && webpack --progress --bail --env dist -p",
     "lint": "eslint ./src",
     "clean": "rimraf dist/*",
-    "copy": "copyfiles -f ./src/index.html ./dist && copyfiles -u 1 \"./src/static/**\" ./dist",
+    "copy": "copyfiles -u 1 \"./src/static/**\" ./dist",
     "release:major": "npm version prerelease && git push --follow-tags && npm publish --tag beta",
     "release:minor": "npm version prerelease && git push --follow-tags && npm publish --tag beta",
     "release:patch": "npm version prerelease && git push --follow-tags && npm publish --tag beta"
@@ -59,6 +59,7 @@
     "eslint-plugin-jsx-a11y": "^2.0.0",
     "eslint-plugin-react": "^6.0.0",
     "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^2.22.0",
     "karma": "^1.0.0",
     "karma-chai": "^0.1.0",
     "karma-coverage": "^1.0.0",

src/templates/README.md

@@ -0,0 +1,15 @@
+# templates
+
+This directory contains templates that are used to build the HTML 
+files that Webpack will use to run or create the served pages.
+
+## html-webpack-plugin
+
+Templates are created via 
+[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin). 
+All its features (cache hashes, various templating languages, ...) 
+are available to customize and extend template behavior.
+
+## Configuration
+
+The entry point for configuring the plugin is in `conf/webpack/Base.js`. 

src/templates/index.ejs

@@ -0,0 +1,41 @@
+<!--
+@file This is the main template file that will be transformed to the index.html when running Webpack.
+
+See `conf/Base.js` for its initial configuration values. You can modify these to achieve customized template logic.
+
+Additional supported settings:
+
+- {string} lang   specifies the language of the content
+-->
+<!DOCTYPE html>
+<html lang="<%= htmlWebpackPlugin.options.lang || 'en' %>">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= htmlWebpackPlugin.options.title || 'Generator React Webpack'%></title>
+
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
+
+  <% for (var css in htmlWebpackPlugin.files.css) { %>
+  <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+  <% } %>
+
+</head>
+<body>
+
+<% if (htmlWebpackPlugin.options.appMountId) { %>
+<div id="<%= htmlWebpackPlugin.options.appMountId%>"></div>
+<% } %>
+
+<% if (htmlWebpackPlugin.options.appMountIds && htmlWebpackPlugin.options.appMountIds.length > 0) { %>
+<% for (var index in htmlWebpackPlugin.options.appMountIds) { %>
+<div id="<%= htmlWebpackPlugin.options.appMountIds[index]%>"></div>
+<% } %>
+<% } %>
+
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
+<% } %>
+
+</body>
+</html>