Asset cache busting via HtmlWebpackPlugin

flyforfreedom · Jul 29, 2015 · 0167342 · 0167342
1 parent 03cac79
commit 0167342
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,7 @@ profiles.clj
 /*.lock.db
 /*.trace.db
 /resources/frontend_client/app/dist/
+/resources/frontend_client/index.html
 /node_modules/
 /.babel_cache
 /coverage

diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "eslint-plugin-react": "^2.5.0",
     "extract-text-webpack-plugin": "^0.8.1",
     "glob": "^5.0.10",
+    "html-webpack-plugin": "^1.6.0",
     "istanbul-instrumenter-loader": "^0.1.3",
     "jasmine-core": "^2.3.4",
     "karma": "^0.12.36",

diff --git a/resources/frontend_client/index.html → ...urces/frontend_client/index_template.html b/resources/frontend_client/index.html → ...urces/frontend_client/index_template.html
@@ -8,9 +8,6 @@
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <title>Metabase</title>
 
-        <link rel="stylesheet" href="/app/dist/styles.bundle.css"/>
-        <script charset="utf-8" src="/app/dist/vendor.bundle.js"></script>
-        <script charset="utf-8" src="/app/dist/app.bundle.js"></script>
     </head>
 
     <body ng-controller="Corvus">

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,6 +7,7 @@ var webpackPostcssTools = require('webpack-postcss-tools');
 var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
 var NgAnnotatePlugin = require('ng-annotate-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 var _ = require('underscore');
 var glob = require('glob');
@@ -42,7 +43,8 @@ module.exports = {
     // output to "dist"
     output: {
         path: __dirname + '/resources/frontend_client/app/dist',
-        filename: '[name].bundle.js'
+        filename: '[name].bundle.js?[chunkhash]',
+        publicPath: '/app/dist'
     },
 
     module: {
@@ -114,7 +116,12 @@ module.exports = {
             minChunks: Infinity // (with more entries, this ensures that no other module goes into the vendor chunk)
         }),
         // Extracts initial CSS into a standard stylesheet that can be loaded in parallel with JavaScript
-        new ExtractTextPlugin('styles.bundle.css')
+        new ExtractTextPlugin('[name].bundle.css?[contenthash]'),
+        new HtmlWebpackPlugin({
+          filename: '../../index.html',
+          template: 'resources/frontend_client/index_template.html',
+          inject: 'head'
+        })
     ],
 
     // CSSNext configuration