Add manual css cache busting

alexburner · Dec 23, 2019 · 93f87e7 · 93f87e7
1 parent f5c6321
commit 93f87e7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 40 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,7 @@
     <title>dimensions</title>
     <meta name="description" content="Playground for forces & n-dimensional geometry">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
-  <link href="style.css?v=2" rel="stylesheet"></head>
+  <link href="style.css?v=1577062157886" rel="stylesheet"></head>
   <body>
     <div id="root"></div>
   <script type="text/javascript" src="bundle.6143028548f4e798bc2b.js"></script></body>

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,7 +1,8 @@
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
+const path = require('path')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin')
+const now = Date.now()
 module.exports = {
   devtool: 'cheap-module-source-map',
   entry: './src/index.tsx',
@@ -11,58 +12,54 @@ module.exports = {
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
-    modules: [
-      path.resolve(__dirname),
-      'node_modules',
-    ],
+    modules: [path.resolve(__dirname), 'node_modules'],
   },
   module: {
     rules: [
       {
         enforce: 'pre',
         test: /\.js$/,
-        loader: 'source-map-loader'
+        loader: 'source-map-loader',
       },
       {
-          test: /\.tsx?$/,
-          exclude: /node_modules/,
-          use: [
-              {
-                  loader: 'babel-loader',
-                  options: {
-                      cacheDirectory: true,
-                      presets: ['env'],
-                      plugins: [[
-                          require('babel-plugin-transform-runtime'),
-                          { regenerator: true, polyfill: false },
-                      ]],
-                  },
-              },
-              {
-                  loader: 'awesome-typescript-loader',
-                  options: {
-                      transpileOnly: false,
-                      logLevel: 'info',
-                      useBabel: true,
-                      useCache: true,
-                  },
-              },
-          ],
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+              presets: ['env'],
+              plugins: [
+                [
+                  require('babel-plugin-transform-runtime'),
+                  { regenerator: true, polyfill: false },
+                ],
+              ],
+            },
+          },
+          {
+            loader: 'awesome-typescript-loader',
+            options: {
+              transpileOnly: false,
+              logLevel: 'info',
+              useBabel: true,
+              useCache: true,
+            },
+          },
+        ],
       },
     ],
   },
   plugins: [
-    new CopyWebpackPlugin([
-      { from: 'src/static/', to: '' },
-    ]),
+    new CopyWebpackPlugin([{ from: 'src/static/', to: '' }]),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'src/static/index.html',
     }),
     new HtmlWebpackIncludeAssetsPlugin({
-      assets: ['style.css?v=2'],
+      assets: ['style.css?v=' + now],
       append: false, // prepend
-      // hash: true, // cache busting // doesn't work with gh-pages ???
     }),
   ],
-};
+}