Add hashes to assets, clean dist folder, autogenerate index.html, add favicon support

vinogradov · vinogradov · commit 473982d217a4 · 2015-12-20T23:42:31.000+04:00
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,5 @@
 .idea
 node_modules
 bower_components
-dist/app.js
-dist/app.css
+dist
 npm-debug.log
diff --git a/README.md b/README.md
@@ -15,14 +15,11 @@ Starter Kit for a modern SPA application. Includes only the latest and greatest
 
 # TODO
 
-* add hashes for assets
 * Redux
 * Redux Form 3.0
 * ESLint configure rules: duplicate cases etc
 * JSCS
 * Rollbar?
-* clean dist directory before build
-* webpack-dev-server auto reload 
 
 ### Tests:
 
diff --git a/dist/index.html b/dist/index.html
diff --git a/package.json b/package.json
@@ -19,11 +19,13 @@
     "babel-loader": "*",
     "babel-preset-es2015": "*",
     "babel-preset-react": "*",
+    "clean-webpack-plugin": "*",
     "css-loader": "*",
     "eslint": "*",
     "eslint-loader": "*",
     "eslint-plugin-react": "*",
     "extract-text-webpack-plugin": "*",
+    "html-webpack-plugin": "*",
     "node-sass": "*",
     "sass-loader": "*",
     "style-loader": "*",
diff --git a/src/entry.js b/src/entry.js
@@ -1,3 +1,5 @@
+require('file?name=[name].[ext]!./favicon.ico');
+
 var reactHelloWorld = require('./helloWorldComponent/component');
 
 reactHelloWorld();
diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>App</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,12 +1,25 @@
 var path = require('path');
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var Clean = require('clean-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin')
 
-var SRC_PATH = path.join(__dirname, 'src');
-var APPLICATION_BUNDLE_FILENAME = 'app.js';
-var CSS_BUNDLE_FILENAME = 'app.css';
+var SRC_PATH = 'src';
+var SRC_ABSOLUTE_PATH = path.join(__dirname, SRC_PATH);
+var INDEX_HTML_TEMPLATE_ABSOLUTE_PATH = path.join(SRC_ABSOLUTE_PATH, 'index.html');
+
+var DIST_PATH = 'dist';
+var DIST_ABSOLUTE_PATH = path.join(__dirname, DIST_PATH);
+
+var APPLICATION_BUNDLE_FILENAME = 'app-[hash].js';
+var CSS_BUNDLE_FILENAME = 'app-[hash].css';
 
 var plugins = [
-  new ExtractTextPlugin(CSS_BUNDLE_FILENAME)
+  new ExtractTextPlugin(CSS_BUNDLE_FILENAME),
+  new Clean([DIST_PATH]),
+  new HtmlWebpackPlugin({
+    template: INDEX_HTML_TEMPLATE_ABSOLUTE_PATH,
+    inject: 'body'
+  })
 ];
 
 var isDist = process.argv[2] === '--dist';
@@ -23,18 +36,18 @@ if (isDist) {
 }
 
 module.exports = {
-    context: SRC_PATH,
+    context: SRC_ABSOLUTE_PATH,
     entry: "./entry",
     output: {
-        path: path.join(__dirname, 'dist'),
+        path: DIST_ABSOLUTE_PATH,
         filename: APPLICATION_BUNDLE_FILENAME
     },
     module: {
       // loaders are loaded from bottom to top
       loaders: [{
           loader: 'babel',
           test: /\.js|jsx$/,
-          include: SRC_PATH, // other paths are ignored
+          include: SRC_ABSOLUTE_PATH, // other paths are ignored
           query: {
               presets: ['es2015', 'react']
           }
@@ -43,11 +56,11 @@ module.exports = {
           // Or use preLoaders section to check source files, not modified by other loaders (like babel-loader)
           loader: 'eslint',
           test: /\.js|jsx$/,
-          include: SRC_PATH
+          include: SRC_ABSOLUTE_PATH
         },{
           loader: ExtractTextPlugin.extract('style', 'css!sass'),
           test: /\.scss$/,
-          include: SRC_PATH
+          include: SRC_ABSOLUTE_PATH
         }],
     },
     plugins: plugins
