feat(webpack-cli): added mode argument (#1253)

.babelrc

@@ -1,12 +1,12 @@
 {
-  "presets": [[
-    "@babel/preset-env",
-    {
-      "targets": {
-        "node": "current"
-      }
-    }
-  ],
-    "jest"
-  ]
-}
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "node": "current"
+                }
+            }
+        ]
+    ]
+}

.gitignore

@@ -47,3 +47,4 @@ junit.xml
 
 #typescript source maps
 packages/**/*.map
+*.tsbuildinfo

package.json

@@ -133,12 +133,14 @@
     "webpack": "5.x.x"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.7.1",
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-lerna-scopes": "^8.2.0",
     "@types/jest": "^24.0.22",
     "@typescript-eslint/eslint-plugin": "^2.17.0",
     "@typescript-eslint/parser": "^2.17.0",
+    "chalk": "^3.0.0",
     "commitlint": "^8.2.0",
     "commitlint-config-cz": "^0.12.1",
     "cz-customizable": "^6.2.0",
@@ -149,19 +151,17 @@
     "execa": "^3.2.0",
     "husky": "^3.0.9",
     "jest": "^25.1.0",
-    "jest-cli": "^25.1.0",
     "jest-junit": "^10.0.0",
     "jest-serializer-ansi": "^1.0.3",
     "lerna": "^3.20.2",
     "lint-staged": "^9.4.2",
     "nyc": "^14.1.1",
     "prettier": "1.18.2",
     "readable-stream": "^3.5.0",
-    "ts-jest": "^24.1.0",
+    "ts-jest": "^25.2.1",
     "typedoc": "^0.15.0",
     "typescript": "^3.7.2",
     "webpack": "^5.0.0-beta.12",
-    "yeoman-test": "^2.1.0",
-    "chalk": "^3.0.0"
+    "yeoman-test": "^2.1.0"
   }
 }

packages/webpack-cli/README.md

@@ -54,6 +54,7 @@ Options
   --standard               Prints standard output
   -d, --dev                Run development build
   -p, --prod               Run production build
+  --mode string            Defines the mode to pass to webpack
   --version                Get current version
   --node-args string[]     NodeJS flags
 ```

packages/webpack-cli/__tests__/ZeroConfigGroup.test.js

@@ -13,14 +13,33 @@ describe('GroupHelper', function() {
     });
     it('should load the prod zero config', () => {
         const group = new ZeroConfigGroup([
-            [
-                {
-                    prod: true,
-                },
-            ],
+            {
+                prod: true,
+            },
+        ]);
+
+        const result = group.run();
+        expect(result.options.mode).toEqual('production');
+    });
+    it('should handle the mode option [production]', () => {
+        const group = new ZeroConfigGroup([
+            {
+                mode: 'production',
+            },
         ]);
 
         const result = group.run();
         expect(result.options.mode).toEqual('production');
     });
+
+    it('should handle the mode option [development]', () => {
+        const group = new ZeroConfigGroup([
+            {
+                mode: 'development',
+            },
+        ]);
+
+        const result = group.run();
+        expect(result.options.mode).toEqual('development');
+    });
 });

packages/webpack-cli/lib/groups/ZeroConfigGroup.js

@@ -1,4 +1,5 @@
 const GroupHelper = require('../utils/GroupHelper');
+const { logger } = require('@webpack-cli/logger');
 
 const PRODUCTION = 'production';
 const DEVELOPMENT = 'development';
@@ -17,12 +18,25 @@ class ZeroConfigGroup extends GroupHelper {
     getEnvFromOptionsAndMode() {
         if (process.env.NODE_ENV && (process.env.NODE_ENV === PRODUCTION || process.env.NODE_ENV === DEVELOPMENT)) {
             return process.env.NODE_ENV;
-        } else if (this.args.prod) {
+        } else {
+            if (this.args.mode && (this.args.dev || this.args.prod)) {
+                logger.warn(
+                    `You provided both mode and ${
+                        this.args.prod ? '--prod' : '--dev'
+                    } arguments. You should provide just one. "mode" will be used`,
+                );
+                return this.args.mode;
+            }
+            if (this.args.mode) {
+                return this.args.mode;
+            }
+            if (this.args.prod) {
+                return PRODUCTION;
+            } else if (this.args.dev) {
+                return DEVELOPMENT;
+            }
             return PRODUCTION;
-        } else if (this.args.dev) {
-            return DEVELOPMENT;
         }
-        return PRODUCTION;
     }
 
     resolveZeroConfig() {

packages/webpack-cli/lib/utils/cli-flags.js

@@ -283,6 +283,15 @@ module.exports = {
             description: 'Run production build',
             link: 'https://webpack.js.org/concepts/#mode',
         },
+        {
+            name: 'mode',
+            usage: '--mode <development | production>',
+            type: String,
+            group: ZERO_CONFIG_GROUP,
+            description: 'Defines the mode to pass to webpack',
+            link: 'https://webpack.js.org/concepts/#mode',
+            acceptedValues: ["development", "production"]
+        },
         {
             name: 'version',
             usage: '--version',

test/help/__snapshots__/help-single-arg.test.js.snap

@@ -44,6 +44,7 @@ Options
   --standard               Prints standard output                           
   -d, --dev                Run development build                            
   -p, --prod               Run production build                             
+  --mode string            Defines the mode to pass to webpack              
   --version                Get current version                              
   --node-args string[]     NodeJS flags                                     
 

test/mode/dev/dev.test.js

@@ -0,0 +1,51 @@
+'use strict';
+const { run } = require('../../utils/test-utils');
+const { stat } = require('fs');
+const { resolve } = require('path');
+describe('mode flags', () => {
+    it('should load a development config when --dev is passed', done => {
+        const { stderr, stdout } = run(__dirname, ['--dev']);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toBeTruthy();
+        stat(resolve(__dirname, './bin/main.js'), (err, stats) => {
+            expect(err).toBe(null);
+            expect(stats.isFile()).toBe(true);
+            done();
+        });
+    });
+
+    it('should load a development config when --mode=development is passed', done => {
+        const { stderr, stdout } = run(__dirname, ['--mode', 'development']);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toBeTruthy();
+        stat(resolve(__dirname, './bin/main.js'), (err, stats) => {
+            expect(err).toBe(null);
+            expect(stats.isFile()).toBe(true);
+            done();
+        });
+    });
+
+    it('should load a development config when --mode=development and --dev are passed', done => {
+        const { stderr, stdout } = run(__dirname, ['--mode', 'development', '--dev']);
+        expect(stderr).toContain('"mode" will be used');
+        expect(stdout).toBeTruthy();
+
+        stat(resolve(__dirname, './bin/main.js'), (err, stats) => {
+            expect(err).toBe(null);
+            expect(stats.isFile()).toBe(true);
+            done();
+        });
+    });
+
+    it('should load a development config when --mode=development and --prod are passed', done => {
+        const { stderr, stdout } = run(__dirname, ['--mode', 'development', '--prod']);
+        expect(stderr).toContain('"mode" will be used');
+        expect(stdout).toBeTruthy();
+
+        stat(resolve(__dirname, './bin/main.js'), (err, stats) => {
+            expect(err).toBe(null);
+            expect(stats.isFile()).toBe(true);
+            done();
+        });
+    });
+});

test/mode/dev/src/index.js

@@ -0,0 +1 @@
+console.log('default');

test/mode/prod/prod.test.js

@@ -0,0 +1,63 @@
+'use strict';
+const { run } = require('../../utils/test-utils');
+const { stat } = require('fs');
+const { resolve } = require('path');
+describe('mode flags', () => {
+    it('should load a production config when --prod is passed', done => {
+        const { stderr, stdout } = run(__dirname, ['--prod']);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toBeTruthy();
+        stat(resolve(__dirname, './bin/main.js'), (err, stats) => {
+            expect(err).toBe(null);
+            expect(stats.isFile()).toBe(true);
+            done();
+        });
+    });
+
+    it('should load a production config when --mode=production is passed', done => {
+        const { stderr, stdout } = run(__dirname, ['--mode', 'production']);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toBeTruthy();
+        stat(resolve(__dirname, './bin/main.js'), (err, stats) => {
+            expect(err).toBe(null);
+            expect(stats.isFile()).toBe(true);
+            done();
+        });
+    });
+
+    it('should load a production config when --mode=production and --prod are passed', done => {
+        const { stderr, stdout } = run(__dirname, ['--mode', 'production', '--prod']);
+        expect(stderr).toContain('"mode" will be used');
+        expect(stdout).toBeTruthy();
+
+        stat(resolve(__dirname, './bin/main.js'), (err, stats) => {
+            expect(err).toBe(null);
+            expect(stats.isFile()).toBe(true);
+            done();
+        });
+    });
+
+    it('should load a production config when --mode=production and --dev are passed', done => {
+        const { stderr, stdout } = run(__dirname, ['--mode', 'production', '--dev']);
+        expect(stderr).toContain('"mode" will be used');
+        expect(stdout).toBeTruthy();
+
+        stat(resolve(__dirname, './bin/main.js'), (err, stats) => {
+            expect(err).toBe(null);
+            expect(stats.isFile()).toBe(true);
+            done();
+        });
+    });
+
+    it('should load a production config when passing --dev and --prod', done => {
+        const { stderr, stdout } = run(__dirname, ['--prod', '--dev']);
+        expect(stderr).toBeFalsy();
+        expect(stdout).toBeTruthy();
+
+        stat(resolve(__dirname, './bin/main.js'), (err, stats) => {
+            expect(err).toBe(null);
+            expect(stats.isFile()).toBe(true);
+            done();
+        });
+    });
+});

test/mode/prod/src/index.js

@@ -0,0 +1 @@
+console.log('default');

yarn.lock

@@ -18,7 +18,7 @@
     invariant "^2.2.4"
     semver "^5.5.0"
 
-"@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.7.5":
+"@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.7.5", "@babel/core@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.4.tgz#d496799e5c12195b3602d0fddd77294e3e38e80e"
   integrity sha512-0LiLrB2PwrVI+a2/IEskBopDYSd8BCb3rOvH7D5tzoWd696TBEduBvuLVm4Nx6rltrLZqvI3MCalB2K2aVzQjA==
@@ -12094,10 +12094,10 @@ trim-off-newlines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
   integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
 
-ts-jest@^24.1.0:
-  version "24.3.0"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.3.0.tgz#b97814e3eab359ea840a1ac112deae68aa440869"
-  integrity sha512-Hb94C/+QRIgjVZlJyiWwouYUF+siNJHJHknyspaOcZ+OQAIdFG/UrdQVXw/0B8Z3No34xkUXZJpOTy9alOWdVQ==
+ts-jest@^25.2.1:
+  version "25.2.1"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-25.2.1.tgz#49bf05da26a8b7fbfbc36b4ae2fcdc2fef35c85d"
+  integrity sha512-TnntkEEjuXq/Gxpw7xToarmHbAafgCaAzOpnajnFC6jI7oo1trMzAHA04eWpc3MhV6+yvhE8uUBAmN+teRJh0A==
   dependencies:
     bs-logger "0.x"
     buffer-from "1.x"
@@ -12108,7 +12108,7 @@ ts-jest@^24.1.0:
     mkdirp "0.x"
     resolve "1.x"
     semver "^5.5"
-    yargs-parser "10.x"
+    yargs-parser "^16.1.0"
 
 tslib@^1.8.1, tslib@^1.9.0:
   version "1.10.0"
@@ -13050,7 +13050,7 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yargs-parser@10.x, yargs-parser@^10.0.0:
+yargs-parser@^10.0.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
   integrity sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==