feat(cli): adding args, bundle name, chunk naming

* feat(cli): adding args, bundle name, chunk naming

Allow the user to overwrite the default output bundle and chunk
filenaming that this package uses. This respects webpack placeholders
such as [name] and [hash].
Add man text for the cli args.
If args are not provided, we default to using what is used now.
If the user omits '.js' extension from args, we apply it automatically.

* feat(cli): update README.md with new args

* feat(cli): more readable code, review suggestion

Author: hexnaught

README.md

@@ -87,7 +87,11 @@ If those defaults do not work for you, the script accepts some arguments:
 
 - `-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: "".

scripts/index.js

@@ -9,7 +9,15 @@ const ora = require('ora');
 const assert = require('assert');
 
 const {
-  flags: { buildPath, publicPath, reactScriptsVersion, verbose, disableChunks },
+  flags: {
+    buildPath,
+    publicPath,
+    reactScriptsVersion,
+    verbose,
+    disableChunks,
+    outputFilename,
+    chunkFilename,
+  },
 } = require('../utils/cliHandler');
 const { getReactScriptsVersion, isEjected } = require('../utils');
 
@@ -57,8 +65,14 @@ const resolvedBuildPath = buildPath ? handleBuildPath(buildPath) : paths.appBuil
 // update the paths in config
 config.output.path = resolvedBuildPath;
 config.output.publicPath = publicPath || '';
-config.output.filename = `js/bundle.js`;
-config.output.chunkFilename = `js/[name].chunk.js`;
+
+// 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');

utils/cliHandler.js

@@ -10,23 +10,39 @@ module.exports = meow(
     Options
       -b, --build-path Path to the build folder. Absolute or relative path, if relative will be prefixed with project root folder path.
 
+      --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.
+
       --disable-chunks Disable code-splitting / chunks so that only a single bundle.js file is generated. Only available in 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.
+
       -p, --public-path Public URL.
 
       --react-scripts-version Version of the react-scripts package used in your project i.e 2.0.3. If not given it will be implied from your package.json and if it cannot be implied the major version 2 will be the default.
 
       -v, --verbose
-      
+
     Examples
       $ cra-build-watch -b dist/ -p /assets
+      $ cra-build-watch --chunk-filename './js/[chunkhash].[name]' -o './js/myapp'
+      $ cra-build-watch -b dist/ -p /assets --chunk-filename './js/[name]/[hash].js' -v
 `,
   {
     flags: {
       'build-path': {
         type: 'string',
         alias: 'b',
       },
+      'chunk-filename': {
+        type: 'string',
+      },
+      'disable-chunks': {
+        type: 'boolean',
+      },
+      'output-filename': {
+        type: 'string',
+        alias: 'o',
+      },
       'public-path': {
         type: 'string',
         alias: 'p',
@@ -38,9 +54,6 @@ module.exports = meow(
         type: 'boolean',
         alias: 'v',
       },
-      'disable-chunks': {
-        type: 'boolean',
-      },
     },
   }
 );