From 73dd89843f2ca82d437b75982bda5d7bb1272c6b Mon Sep 17 00:00:00 2001
From: Chris Goller <goller@gmail.com>
Date: Fri, 3 Nov 2017 19:33:16 -0500
Subject: [PATCH] Add cleanup step to js dev builds to remove unused files

---
 ui/package.json         |  1 +
 ui/webpack/devConfig.js | 66 +++++++++++++++++++++++++++++++----------
 ui/yarn.lock            |  4 +++
 3 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 6bdd36614..6355c75ad 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -77,6 +77,7 @@
     "mocha-loader": "^0.7.1",
     "mustache": "^2.2.1",
     "node-sass": "^4.5.3",
+    "on-build-webpack": "^0.1.0",
     "postcss-browser-reporter": "^0.4.0",
     "postcss-calc": "^5.2.0",
     "postcss-loader": "^0.8.0",
diff --git a/ui/webpack/devConfig.js b/ui/webpack/devConfig.js
index acef0ed03..5bba034e6 100644
--- a/ui/webpack/devConfig.js
+++ b/ui/webpack/devConfig.js
@@ -1,11 +1,16 @@
-var webpack = require('webpack');
-var path = require('path');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
-var HtmlWebpackPlugin = require("html-webpack-plugin");
-var package = require('../package.json');
-var dependencies = package.dependencies;
+var webpack = require('webpack')
+var path = require('path')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var package = require('../package.json')
+const WebpackOnBuildPlugin = require('on-build-webpack')
+const fs = require('fs')
+var dependencies = package.dependencies
+
+const buildDir = path.resolve(__dirname, '../build')
 
 module.exports = {
+  watch: true,
   devtool: 'source-map',
   entry: {
     app: path.resolve(__dirname, '..', 'src', 'index.js'),
@@ -48,15 +53,21 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader!resolve-url!sass?sourceMap'),
+        loader: ExtractTextPlugin.extract(
+          'style-loader',
+          'css-loader!sass-loader!resolve-url!sass?sourceMap'
+        ),
       },
       {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader'),
+        loader: ExtractTextPlugin.extract(
+          'style-loader',
+          'css-loader!postcss-loader'
+        ),
       },
       {
-        test   : /\.(ico|png|cur|jpg|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-        loader : 'file',
+        test: /\.(ico|png|cur|jpg|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+        loader: 'file',
       },
       {
         test: /\.js$/,
@@ -70,7 +81,7 @@ module.exports = {
     ],
   },
   sassLoader: {
-    includePaths: [path.resolve(__dirname, "node_modules")],
+    includePaths: [path.resolve(__dirname, 'node_modules')],
   },
   eslint: {
     failOnWarning: false,
@@ -78,10 +89,10 @@ module.exports = {
   },
   plugins: [
     new webpack.ProvidePlugin({
-      $: "jquery",
-      jQuery: "jquery",
+      $: 'jquery',
+      jQuery: 'jquery',
     }),
-    new ExtractTextPlugin("chronograf.css"),
+    new ExtractTextPlugin('chronograf.css'),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, '..', 'src', 'index.template.html'),
       inject: 'body',
@@ -93,7 +104,32 @@ module.exports = {
     new webpack.DefinePlugin({
       VERSION: JSON.stringify(require('../package.json').version),
     }),
+    new WebpackOnBuildPlugin(function(stats) {
+      const newlyCreatedAssets = stats.compilation.assets
+
+      const unlinked = []
+      fs.readdir(path.resolve(buildDir), (err, files) => {
+        files.forEach(file => {
+          if (!newlyCreatedAssets[file]) {
+            console.log('Removed ', file)
+            const del = path.resolve(buildDir + file)
+            fs.stat(del, function(err, stat) {
+              if (err == null) {
+                try {
+                  fs.unlink(path.resolve(buildDir + file))
+                  console.log('Removed ', file)
+                  unlinked.push(file)
+                } catch (e) {}
+              }
+            })
+          }
+        })
+        if (unlinked.length > 0) {
+          console.log('Removed old assets: ', unlinked)
+        }
+      })
+    }),
   ],
   postcss: require('./postcss'),
   target: 'web',
-};
+}
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 373b56145..966c0876e 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -5134,6 +5134,10 @@ object.values@^1.0.3:
     function-bind "^1.1.0"
     has "^1.0.1"
 
+on-build-webpack@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/on-build-webpack/-/on-build-webpack-0.1.0.tgz#a287c0e17766e6141926e5f2cbb0d8bb53b76814"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"