From b45ef739fe5620406ad7839f9517eff16c94aa00 Mon Sep 17 00:00:00 2001
From: William Chargin <wchargin@gmail.com>
Date: Mon, 30 Jul 2018 18:01:47 -0700
Subject: [PATCH] new-webpack: clean `build/` before prod (#568)

Summary:
In our current system, we build by invoking `scripts/build.js`, which
begins by removing the `build/` directory. This behavior is nice,
because it prevents cross-contamination between builds. In this commit,
we add a plugin to achieve the same result from directly within Webpack.

Test Plan:
Run

```
mkdir -p ./build
touch ./build/wat
NODE_ENV=production node ./node_modules/.bin/webpack \
    --config config/makeWebpackConfig.js
```

and ensure that `./build/wat` does not exist after the build completes.

wchargin-branch: webpack-clean-build
---
 config/makeWebpackConfig.js | 3 +++
 config/paths.js             | 1 +
 package.json                | 1 +
 yarn.lock                   | 6 ++++++
 4 files changed, 11 insertions(+)

diff --git a/config/makeWebpackConfig.js b/config/makeWebpackConfig.js
index 03a4e32..288cb18 100644
--- a/config/makeWebpackConfig.js
+++ b/config/makeWebpackConfig.js
@@ -4,6 +4,7 @@ const express = require("express");
 const os = require("os");
 const path = require("path");
 const webpack = require("webpack");
+const CleanPlugin = require("clean-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
 const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
 const StaticSiteGeneratorPlugin = require("static-site-generator-webpack-plugin");
@@ -257,6 +258,8 @@ function plugins(mode /*: "development" | "production" */) {
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
   ];
   const prodOnlyPlugins = [
+    // Remove the output directory before starting the build.
+    new CleanPlugin([paths.appBuild], {root: paths.root}),
     // Minify the code.
     new webpack.optimize.UglifyJsPlugin({
       compress: {
diff --git a/config/paths.js b/config/paths.js
index 1830060..b5dd9f4 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -34,6 +34,7 @@ function getServedPath() {
 
 // config after eject: we're in ./config/
 module.exports = {
+  root: appDirectory,
   dotenv: resolveApp(".env"),
   appBuild: resolveApp("build"),
   appPublic: resolveApp("src/app/public"),
diff --git a/package.json b/package.json
index 90e7a68..d34cac4 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "babel-preset-react-app": "^3.1.1",
     "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
+    "clean-webpack-plugin": "^0.1.19",
     "css-loader": "0.28.7",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.0.1",
diff --git a/yarn.lock b/yarn.lock
index 24bc492..8c963ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1586,6 +1586,12 @@ clean-stack@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-1.3.0.tgz#9e821501ae979986c46b1d66d2d432db2fd4ae31"
 
+clean-webpack-plugin@^0.1.19:
+  version "0.1.19"
+  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-0.1.19.tgz#ceda8bb96b00fe168e9b080272960d20fdcadd6d"
+  dependencies:
+    rimraf "^2.6.1"
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"