fix(v2): clean build dir only on build command

v2/lib/commands/build.js

@@ -6,6 +6,7 @@
  */
 
 const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 const path = require('path');
 const chalk = require('chalk');
 const fs = require('fs-extra');
@@ -26,7 +27,7 @@ function compile(config) {
         stats.toJson().errors.forEach(e => {
           console.error(e);
         });
-        reject(new Error(`Failed to compile with errors.`));
+        reject(new Error('Failed to compile with errors.'));
       }
       if (stats.hasWarnings()) {
         stats.toJson().warnings.forEach(warning => {
@@ -44,25 +45,38 @@ module.exports = async function build(siteDir) {
 
   const props = await load(siteDir);
 
-  let serverConfig = createServerConfig(props).toConfig();
-  let clientConfig = createClientConfig(props).toConfig();
-
   // Apply user webpack config.
   const {
+    outDir,
     siteConfig: {configureWebpack},
   } = props;
-  clientConfig = applyConfigureWebpack(configureWebpack, clientConfig, false);
-  serverConfig = applyConfigureWebpack(configureWebpack, serverConfig, true);
+
+  const clientConfigObj = createClientConfig(props);
+  // Remove/clean build folders before building bundles.
+  clientConfigObj
+    .plugin('clean')
+    .use(CleanWebpackPlugin, [outDir, {verbose: false, allowExternal: true}]);
+  const serverConfigObj = createServerConfig(props);
+  const clientConfig = applyConfigureWebpack(
+    configureWebpack,
+    clientConfigObj.toConfig(),
+    false,
+  );
+  const serverConfig = applyConfigureWebpack(
+    configureWebpack,
+    serverConfigObj.toConfig(),
+    true,
+  );
 
   // Build the client bundles first.
-  // We cannot run them in parallel because the server need to pickup the correct client bundle name
+  // We cannot run them in parallel because the server needs to know
+  // the correct client bundle name.
   await compile(clientConfig);
 
-  // Build the server bundles (render the static HTML and pick client bundle)
+  // Build the server bundles (render the static HTML and pick client bundle),
   await compile(serverConfig);
 
   // Copy static files.
-  const {outDir} = props;
   const staticDir = path.resolve(siteDir, 'static');
   const staticFiles = await globby(['**'], {
     cwd: staticDir,

v2/lib/core/serverEntry.js

@@ -12,7 +12,7 @@ import Helmet from 'react-helmet';
 import {getBundles} from 'react-loadable/webpack';
 import Loadable from 'react-loadable';
 
-import reactLoadableStats from '@build/react-loadable.json'; //eslint-disable-line
+import reactLoadableStats from '@generated/react-loadable.json'; //eslint-disable-line
 import webpackClientStats from '@build/client.stats.json'; //eslint-disable-line
 import routes from '@generated/routes'; // eslint-disable-line
 import preload from './preload';

v2/lib/webpack/client.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const cleanWebpackPlugin = require('clean-webpack-plugin');
 const path = require('path');
 const webpackNiceLog = require('webpack-nicelog');
 const {StatsWriterPlugin} = require('webpack-stats-plugin');
@@ -15,14 +14,12 @@ const createBaseConfig = require('./base');
 const {applyChainWebpack} = require('./utils');
 
 module.exports = function createClientConfig(props) {
+  const isProd = process.env.NODE_ENV === 'production';
+
   const config = createBaseConfig(props);
   config.entry('main').add(path.resolve(__dirname, '../core/clientEntry.js'));
 
-  const {outDir} = props;
-  // Remove/clean build folders before building bundles.
-  config
-    .plugin('clean')
-    .use(cleanWebpackPlugin, [outDir, {verbose: false, allowExternal: true}]);
+  const {generatedFilesDir} = props;
   // Write webpack stats object so we can pickup correct client bundle path in server.
   config
     .plugin('clientStats')
@@ -30,11 +27,10 @@ module.exports = function createClientConfig(props) {
   config
     .plugin('reactLoadableStats')
     .use(ReactLoadablePlugin, [
-      {filename: path.join(outDir, 'react-loadable.json')},
+      {filename: path.join(generatedFilesDir, 'react-loadable.json')},
     ]);
 
   // Show compilation progress bar and build time.
-  const isProd = process.env.NODE_ENV === 'production';
   config
     .plugin('niceLog')
     .use(webpackNiceLog, [{name: 'Client', skipBuildTime: isProd}]);

v2/lib/webpack/server.js

@@ -7,7 +7,7 @@
 
 const _ = require('lodash');
 const path = require('path');
-const staticSiteGenerator = require('static-site-generator-webpack-plugin');
+const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
 const webpackNiceLog = require('webpack-nicelog');
 const createBaseConfig = require('./base');
 const {applyChainWebpack} = require('./utils');
@@ -34,7 +34,7 @@ module.exports = function createServerConfig(props) {
     ...docsFlatMetadatas,
     ...pagesMetadatas,
   ].map(data => data.permalink);
-  config.plugin('siteGenerator').use(staticSiteGenerator, [
+  config.plugin('siteGenerator').use(StaticSiteGeneratorPlugin, [
     {
       entry: 'main',
       locals: {

v2/test/loadSetup.js

@@ -9,7 +9,7 @@ import '@babel/polyfill';
 import path from 'path';
 import load from '@lib/load';
 
-// Helper methods to setup dummy/ fake projects
+// Helper methods to setup dummy/fake projects
 const loadSetup = async name => {
   const fixtures = path.join(__dirname, '__fixtures__');
   const simpleSite = path.join(fixtures, 'simple-site');