Merge pull request #140 from Nargonath/develop

v3.1.0

Author: Nargonath

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: "".

package.json

@@ -64,11 +64,11 @@
     "@commitlint/cli": "8.3.5",
     "@commitlint/config-conventional": "8.3.4",
     "@dixeed/eslint-config": "2.0.0",
-    "cz-conventional-changelog": "3.0.2",
+    "cz-conventional-changelog": "3.1.0",
     "eslint": "6.8.0",
     "husky": "4.2.1",
-    "jest": "^24.8.0",
-    "lint-staged": "10.0.2",
+    "jest": "^25.1.0",
+    "lint-staged": "10.0.7",
     "prettier": "1.19.1"
   },
   "dependencies": {

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',
-      },
     },
   }
 );