Make assets unique (#518)

* Make all assets unique

All CSS and JavaScript files have unique names now. I also moved the
login to the /login path in order to ensure the HTML for each page is
also unique.

* Explicitly include assets to cache

scripts/webpack.client.config.js

@@ -7,102 +7,82 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const WebpackPwaManifest = require("webpack-pwa-manifest");
 const { GenerateSW } = require("workbox-webpack-plugin");
 
-// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
-
 const root = path.join(__dirname, "..");
 const prod = process.env.NODE_ENV === "production" || process.env.CI === "true";
+const cachePattern = /\.(?:png|jpg|jpeg|svg|css|js|ttf|woff|eot|woff2|wasm)$/;
 
 module.exports = (options = {}) => merge(
-  require("./webpack.general.config")(options), {
-    devtool: prod ? "none" : "cheap-module-eval-source-map",
-    mode: prod ? "production" : "development",
-    entry: prod ? options.entry : [
-      "webpack-hot-middleware/client?reload=true&quiet=true",
-      options.entry,
-    ],
-    module: {
-      rules: [{
-        test: /\.s?css$/,
-        // This is required otherwise it'll fail to resolve CSS in common.
-        include: root,
-        use: [{
-          loader: MiniCssExtractPlugin.loader,
-        }, {
-          loader: "css-loader",
-        }, {
-          loader: "sass-loader",
-        }],
-      }, {
-        test: /\.(png|ttf|woff|eot|woff2)$/,
-        use: [{
-          loader: "file-loader",
-          options: {
-            name: "[path][name].[ext]",
-          },
-        }],
-      }, {
-        test: /\.svg$/,
-        loader: 'url-loader'
-      }],
-    },
-    plugins: [
-      new MiniCssExtractPlugin({
-        filename: "[name].css",
-        chunkFilename: "[id].css"
-      }),
-      new HtmlWebpackPlugin({
-        template: options.template
-      }),
-      new PreloadWebpackPlugin({
-        rel: "preload",
-        as: "script"
-      }),
-      new WebpackPwaManifest({
-        name: "Coder",
-        short_name: "Coder",
-        description: "Run VS Code on a remote server",
-        background_color: "#e5e5e5",
-        icons: [
-          {
-            src: path.join(root, "packages/web/assets/logo.png"),
-            sizes: [96, 128, 192, 256, 384]
-          }
-        ]
-      })
-    ].concat(prod ? [
-      new GenerateSW({
-        exclude: [/\.map$/, /^manifest.*\.js$/, /\.html$/],
-        runtimeCaching: [
-          {
-            urlPattern: new RegExp("^(?!.*(html))"),
-            handler: "StaleWhileRevalidate",
-            options: {
-              cacheName: "code-server",
-              expiration: {
-                maxAgeSeconds: 86400
-              },
-              cacheableResponse: {
-                statuses: [0, 200]
-              }
-            }
-          }
-          // Network first caching is also possible.
-          /*{
-        urlPattern: new RegExp("^(?!.*(html))"),
-        handler: "NetworkFirst",
-        options: {
-          networkTimeoutSeconds: 4,
-          cacheName: "code-server",
-          expiration: {
-            maxAgeSeconds: 86400,
-          },
-          cacheableResponse: {
-            statuses: [0, 200],
-          },
-        },
-      }*/
-        ]
-      })
-    ] : [new webpack.HotModuleReplacementPlugin()]),
-    target: "web"
-  });
+	require("./webpack.general.config")(options), {
+	devtool: prod ? "none" : "cheap-module-eval-source-map",
+	mode: prod ? "production" : "development",
+	entry: prod ? options.entry : [
+		"webpack-hot-middleware/client?reload=true&quiet=true",
+		options.entry,
+	],
+	module: {
+		rules: [{
+			test: /\.s?css$/,
+			// This is required otherwise it'll fail to resolve CSS in common.
+			include: root,
+			use: [{
+				loader: MiniCssExtractPlugin.loader,
+			}, {
+				loader: "css-loader",
+			}, {
+				loader: "sass-loader",
+			}],
+		}, {
+			test: /\.(png|ttf|woff|eot|woff2)$/,
+			use: [{
+				loader: "file-loader",
+				options: {
+					name: "[path][name].[ext]",
+				},
+			}],
+		}, {
+			test: /\.svg$/,
+			loader: 'url-loader'
+		}],
+	},
+	plugins: [
+		new MiniCssExtractPlugin({
+			chunkFilename: `${options.name || "client"}.[name].[hash:6].css`,
+			filename: `${options.name || "client"}.[name].[hash:6].css`
+		}),
+		new HtmlWebpackPlugin({
+			template: options.template
+		}),
+		new PreloadWebpackPlugin({
+			rel: "preload",
+			as: "script"
+		}),
+		new WebpackPwaManifest({
+			name: "Coder",
+			short_name: "Coder",
+			description: "Run VS Code on a remote server",
+			background_color: "#e5e5e5",
+			icons: [{
+				src: path.join(root, "packages/web/assets/logo.png"),
+				sizes: [96, 128, 192, 256, 384],
+			}],
+		})
+	].concat(prod ? [
+		new GenerateSW({
+			include: [cachePattern],
+			runtimeCaching: [{
+				urlPattern: cachePattern,
+				handler: "StaleWhileRevalidate",
+				options: {
+					cacheName: "code-server",
+					expiration: {
+						maxAgeSeconds: 86400,
+					},
+					cacheableResponse: {
+						statuses: [0, 200],
+					},
+				},
+			},
+		]}),
+	] : [new webpack.HotModuleReplacementPlugin()]),
+	target: "web"
+});

scripts/webpack.general.config.js

@@ -13,6 +13,11 @@ module.exports = (options = {}) => ({
 	externals: {
 		fsevents: "fsevents",
 	},
+	output: {
+		path: path.join(options.dirname || __dirname, "out"),
+		chunkFilename: `${options.name || "general"}.[name].[hash:6].js`,
+		filename: `${options.name || "general"}.[name].[hash:6].js`
+	},
 	module: {
 		rules: [{
 			loader: "string-replace-loader",