feat: rewrite to take advantage of webpackDevServer writeToDisk setting

CRA has gone a long way since I wrote the first cra-build-watch version. Their webpack configuration
changed a lot and often broke this tool in subtle ways. It has proven to be hard to maintain while
being brittle and providing only a subset of the features CRA offers out of the box. Since then
webpack-dev-server provided a new feature called writeToDisk which does what cra-build-watch first
intended to provide.  This rewrite intends on making a clean break from the past and embrace the
future 🚀.

BREAKING CHANGE: Remove most of the flags/features of cra-build-watch. It is not anymore a CLI
replacement for react-scripts but rather something you call one-time after an `npm install`  and
then forget about it. It keeps CRA webpack configuration intact so you can enjoy all of CRA's
wonderful features.

Author: Nargonath

README.md

@@ -35,6 +35,27 @@ As of now (20/04/2018), `create-react-app` (more precisely `react-scripts`) does
 - Incorporating your React application into an existing application.
 - Serving your React app with a dedicated backend.
 
+# Notes for version `v4.0.0` beta testers
+
+This is just the bare version for the new behavior of the tool. I doesn't not handle any of the previous options and perhaps it shall never again. Most issues on this repo asked for features that CRA already provided out of the box so I expect most of them to be dealt with in this version. 
+
+It does not handle ejected projects yet either but it will in subsequent beta versions.
+
+## Usage
+
+Call at the project root:
+
+```bash
+npx cra-build-watch
+
+```
+
+You don't need to use `cra-build-watch` as an executable in an npm script anymore. You just need to call it every time you upgrade `react-scripts`. It works on bare CRA project. You should be able to enjoy what CRA has to offer. This tool now only monkey-patches the webpack configuration to leverage webpack-dev-server `writeToDisk` property.
+
+<details>
+
+<summary>Old versions</summary>
+
 # Prerequisites
 
 Supports `react-scripts >= 1.0.x`, hence it supports the newest version `4.x.x`.
@@ -61,9 +82,9 @@ Add a new script into your `package.json`:
 
 ```json
 {
-  "scripts": {
-    "watch": "cra-build-watch"
-  }
+"scripts": {
+"watch": "cra-build-watch"
+}
 }
 ```
 
@@ -85,20 +106,21 @@ By default the script will generate everything into `build/` at your project roo
 
 If those defaults do not work for you, the script accepts some arguments:
 
-- `--after-initial-build-hook`: accepts a string of shell code that will be run only once after the initial build in the same process as the `cra-build-watch`.
-- `--after-rebuild-hook`: accepts a string of shell code that will be run every time webpack rebuilds your project after a filesystem change. It runs in the same process as `cra-build-watch`.
-- `-b|--build-path`: expects either an absolute or relative path. If a relative path is given it will be prefixed by your project root path.
-  - default: `yourProjectRoot/build`.
-- `--chunk-filename`: Set the naming you want to use for non-entry chunk files. Accepts webpack placeholders such as `[id]`, `[name]`, `[hash]`. Directories can be supplied.
-  - default: `js/bundle.js`.
-- `--disable-chunks`: disable code-splitting / chunks so that only a single bundle.js file is generated. It only works with `react-scripts` >= `2.0.0`.
-- `-o|--output-filename`: Set the name to be used for the output bundle. Accepts webpack placeholders such as `[id]`, `[name]`, `[hash]`. Directories can be supplied.
-  - default: `js/[name].chunk.js`
-- `--react-scripts-version`: expects the `react-scripts` version you are using in your project i.e `2.0.3`. If not given it will be implied from your `node_modules` and if it cannot be implied the version `2.1.2` will be the default. Consider setting it if you **ejected** and are not using the latest `react-scripts` version.
-- `-p|--public-path`: expects a relative URL where `/` is the root. If you serve your files using an external webserver this argument is to match with your web server configuration. More information can be found in [webpack configuration guide](https://webpack.js.org/configuration/output/#output-publicpath).
-  - default: "".
-- `-v|--verbose`: display webpack build output.
+    - `--after-initial-build-hook`: accepts a string of shell code that will be run only once after the initial build in the same process as the `cra-build-watch`.
+    - `--after-rebuild-hook`: accepts a string of shell code that will be run every time webpack rebuilds your project after a filesystem change. It runs in the same process as `cra-build-watch`.
+    - `-b|--build-path`: expects either an absolute or relative path. If a relative path is given it will be prefixed by your project root path.
+      - default: `yourProjectRoot/build`.
+    - `--chunk-filename`: Set the naming you want to use for non-entry chunk files. Accepts webpack placeholders such as `[id]`, `[name]`, `[hash]`. Directories can be supplied.
+      - default: `js/bundle.js`.
+    - `--disable-chunks`: disable code-splitting / chunks so that only a single bundle.js file is generated. It only works with `react-scripts` >= `2.0.0`.
+    - `-o|--output-filename`: Set the name to be used for the output bundle. Accepts webpack placeholders such as `[id]`, `[name]`, `[hash]`. Directories can be supplied.
+      - default: `js/[name].chunk.js`
+    - `--react-scripts-version`: expects the `react-scripts` version you are using in your project i.e `2.0.3`. If not given it will be implied from your `node_modules` and if it cannot be implied the version `2.1.2` will be the default. Consider setting it if you **ejected** and are not using the latest `react-scripts` version.
+    - `-p|--public-path`: expects a relative URL where `/` is the root. If you serve your files using an external webserver this argument is to match with your web server configuration. More information can be found in [webpack configuration guide](https://webpack.js.org/configuration/output/#output-publicpath).
+      - default: "".
+    - `-v|--verbose`: display webpack build output.
 
 # Contributions
 
 All contributions are welcomed.
+</details>

scripts/index.js

@@ -1,209 +1,23 @@
 'use strict';
 
 process.env.NODE_ENV = 'development'; // eslint-disable-line no-process-env
-process.env.FAST_REFRESH = false;
 
-const importCwd = require('import-cwd');
 const fs = require('fs-extra');
 const path = require('path');
 const ora = require('ora');
-const assert = require('assert');
-const exec = require('child_process').exec;
 
-const {
-  flags: {
-    buildPath,
-    publicPath,
-    reactScriptsVersion,
-    verbose,
-    disableChunks,
-    outputFilename,
-    chunkFilename,
-    afterInitialBuildHook,
-    afterRebuildHook,
-  },
-} = require('../utils/cliHandler');
-const { getReactScriptsVersion, isEjected } = require('../utils');
-
-const { major, concatenatedVersion } = getReactScriptsVersion(reactScriptsVersion);
-
-const paths = isEjected ? importCwd('./config/paths') : importCwd('react-scripts/config/paths');
-const webpack = importCwd('webpack');
-
-const config =
-  concatenatedVersion >= 212
-    ? (isEjected
-        ? importCwd('./config/webpack.config')
-        : importCwd('react-scripts/config/webpack.config'))('development')
-    : isEjected
-    ? importCwd('./config/webpack.config.dev')
-    : importCwd('react-scripts/config/webpack.config.dev');
-
-const HtmlWebpackPlugin = importCwd('html-webpack-plugin');
-const InterpolateHtmlPlugin = importCwd('react-dev-utils/InterpolateHtmlPlugin');
-const getClientEnvironment = isEjected
-  ? importCwd('./config/env')
-  : importCwd('react-scripts/config/env');
-
-console.log();
-const spinner = ora('Update webpack configuration').start();
-
-// we need to set the public_url ourselves because in dev mode
-// it is supposed to always be an empty string as they are using
-// the in-memory development server to serve the content
-const env = getClientEnvironment(process.env.PUBLIC_URL || ''); // eslint-disable-line no-process-env
-
-/**
- * We need to update the webpack dev config in order to remove the use of webpack devserver
- */
-if (major < 4) {
-  config.entry = config.entry.filter(fileName => !fileName.match(/webpackHotDevClient/));
-}
-config.plugins = config.plugins.filter(
-  plugin => !(plugin instanceof webpack.HotModuleReplacementPlugin)
-);
-
-/**
- * We also need to update the path where the different files get generated.
- */
-const resolvedBuildPath = buildPath ? handleBuildPath(buildPath) : paths.appBuild; // resolve the build path
-
-// update the paths in config
-config.output.path = resolvedBuildPath;
-config.output.publicPath = publicPath || '';
-
-// Grab output names from cli args, otherwise use some default naming.
-const fileNameToUse = outputFilename || `js/bundle.js`;
-const chunkNameToUse = chunkFilename || `js/[name].chunk.js`;
-// If cli user adds .js, respect that, otherwise we add it ourself
-config.output.filename = fileNameToUse.slice(-3) !== '.js' ? `${fileNameToUse}.js` : fileNameToUse;
-config.output.chunkFilename =
-  chunkNameToUse.slice(-3) !== '.js' ? `${chunkNameToUse}.js` : chunkNameToUse;
-
-if (disableChunks) {
-  assert(major >= 2, 'Split chunks optimization is only available in react-scripts >= 2.0.0');
-  // disable code-splitting/chunks
-  config.optimization.runtimeChunk = false;
-
-  config.optimization.splitChunks = {
-    cacheGroups: {
-      default: false,
-    },
-  };
-}
-
-// update media path destination
-if (major >= 4) {
-  const oneOfIndex = 1;
-  config.module.rules[oneOfIndex].oneOf[0].options.name = `media/[name].[hash:8].[ext]`;
-  config.module.rules[oneOfIndex].oneOf[1].options.name = `media/[name].[hash:8].[ext]`;
-  config.module.rules[oneOfIndex].oneOf[8].options.name = `media/[name].[hash:8].[ext]`;
-} else if (major >= 2) {
-  // 2.0.0 => 2
-  // 2.0.1 => 3
-  // 2.0.2 => 3
-  // 2.0.3 => 3
-  // 2.0.4 to 3.0.0 => 2
-  const oneOfIndex = concatenatedVersion === 200 || concatenatedVersion >= 204 ? 2 : 3;
-  config.module.rules[oneOfIndex].oneOf[0].options.name = `media/[name].[hash:8].[ext]`;
-  config.module.rules[oneOfIndex].oneOf[7].options.name = `media/[name].[hash:8].[ext]`;
-} else {
-  config.module.rules[1].oneOf[0].options.name = `media/[name].[hash:8].[ext]`;
-  config.module.rules[1].oneOf[3].options.name = `media/[name].[hash:8].[ext]`;
-}
-
-let htmlPluginIndex = 1;
-let interpolateHtmlPluginIndex = 0;
-if (major >= 2) {
-  htmlPluginIndex = 0;
-  interpolateHtmlPluginIndex = 1;
-}
-
-// we need to override the InterpolateHtmlPlugin because in dev mod
-// they don't provide it the PUBLIC_URL env
-config.plugins[interpolateHtmlPluginIndex] = new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw);
-config.plugins[htmlPluginIndex] = new HtmlWebpackPlugin({
-  inject: true,
-  template: paths.appHtml,
-  filename: 'index.html',
-});
+const rootCraPath = path.join(process.cwd(), 'node_modules', 'react-scripts');
+const configPath = path.join(rootCraPath, 'config');
+const configSource = path.join(configPath, 'webpackDevServer.config.js');
+const destSource = path.join(configPath, 'webpackDevServer.config.ori.js');
 
+const spinner = ora('💾 Create webpackDevServer.config.js backup').start();
+fs.moveSync(configSource, destSource);
 spinner.succeed();
-spinner.start('Clear destination folder');
 
-let inProgress = false;
-
-fs.emptyDir(paths.appBuild)
-  .then(() => {
-    spinner.succeed();
-
-    return new Promise((resolve, reject) => {
-      const webpackCompiler = webpack(config);
-      new webpack.ProgressPlugin(() => {
-        if (!inProgress) {
-          spinner.start('Start webpack watch');
-          inProgress = true;
-        }
-      }).apply(webpackCompiler);
-
-      webpackCompiler.watch({}, (err, stats) => {
-        if (err) {
-          return reject(err);
-        }
-
-        spinner.succeed();
-
-        runHook('after rebuild hook', spinner, afterRebuildHook);
-
-        inProgress = false;
-
-        if (verbose) {
-          console.log();
-          console.log(
-            stats.toString({
-              chunks: false,
-              colors: true,
-            })
-          );
-          console.log();
-        }
-
-        return resolve();
-      });
-    });
-  })
-  .then(() => copyPublicFolder())
-  .then(() => runHook('after initial build hook', spinner, afterInitialBuildHook));
-
-function copyPublicFolder() {
-  return fs.copy(paths.appPublic, resolvedBuildPath, {
-    dereference: true,
-    filter: file => file !== paths.appHtml,
-  });
-}
-
-function runHook(label, spinner, hook) {
-  if (!hook || typeof hook !== 'string') {
-    return;
-  }
-
-  spinner.start(label);
-
-  exec(hook, (error, stdout, stderr) => {
-    if (error) {
-      spinner.fail(`${label}: exec error: ${error}`);
-    } else if (stderr) {
-      spinner.warn(`${label}: ${stderr}`);
-    } else {
-      spinner.succeed(`${label}: ${stdout}`);
-    }
-  });
-}
-
-function handleBuildPath(userBuildPath) {
-  if (path.isAbsolute(userBuildPath)) {
-    return userBuildPath;
-  }
+spinner.start('🔧 Add webpackDevServer.config.js wrapper');
+fs.copySync(path.join(__dirname, '../utils/configWrapper.js'), configSource);
+spinner.succeed();
 
-  return path.join(process.cwd(), userBuildPath);
-}
+console.log();
+console.log(`You're all done. 🧰 Enjoy!`);

utils/configWrapper.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const createDevServerConfig = require('./webpackDevServer.config.ori');
+
+module.exports = function (...args) {
+  const initialConfig = createDevServerConfig(...args);
+
+  return {
+    ...initialConfig,
+    writeToDisk: true,
+  };
+};