fix: add serve script if opted for WDS with init (#2424)

* fix: add start script if opted for WDS

* chore: rename to serve

Author: jamesgeorge007

packages/generators/init-template/package.json.js

@@ -1,9 +1,9 @@
-module.exports = (usingDefaults) => {
+module.exports = (isUsingDevServer) => {
     const scripts = {
         build: 'webpack',
     };
-    if (usingDefaults) {
-        scripts.start = 'webpack-dev-server';
+    if (isUsingDevServer) {
+        scripts.serve = 'webpack serve';
     }
 
     return {

packages/generators/src/init-generator.ts

@@ -244,9 +244,13 @@ export default class InitGenerator extends CustomGenerator {
     public writing(): void {
         this.config.set('configuration', this.configuration);
 
+        const isUsingDevServer = this.dependencies.includes('webpack-dev-server');
         const packageJsonTemplatePath = '../init-template/package.json.js';
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        this.fs.extendJSON(this.destinationPath('package.json'), require(packageJsonTemplatePath)(this.autoGenerateConfig));
+        this.fs.extendJSON(
+            this.destinationPath('package.json'),
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            require(packageJsonTemplatePath)(isUsingDevServer),
+        );
 
         const generateEntryFile = (entryPath: string, name: string): void => {
             entryPath = entryPath.replace(/'/g, '');

test/init/auto/init-auto.test.js

@@ -51,7 +51,9 @@ describe('init auto flag', () => {
             expect(pkgJson).toBeTruthy();
             expect(pkgJson['devDependencies']).toBeTruthy();
             expect(pkgJson['devDependencies']['webpack']).toBeTruthy();
+            expect(pkgJson['devDependencies']['webpack-dev-server']).toBeTruthy();
             expect(pkgJson['scripts']['build'] == 'webpack').toBeTruthy();
+            expect(pkgJson['scripts']['serve'] == 'webpack serve').toBeTruthy();
         };
         expect(pkgJsonTests).not.toThrow();
 

test/init/generation-path/init-generation-path.test.js

@@ -42,7 +42,9 @@ describe('init generate-path flag', () => {
             expect(pkgJson).toBeTruthy();
             expect(pkgJson['devDependencies']).toBeTruthy();
             expect(pkgJson['devDependencies']['webpack']).toBeTruthy();
+            expect(pkgJson['devDependencies']['webpack-dev-server']).toBeTruthy();
             expect(pkgJson['scripts']['build'] == 'webpack').toBeTruthy();
+            expect(pkgJson['scripts']['serve'] == 'webpack serve').toBeTruthy();
         };
         expect(pkgJsonTests).not.toThrow();
     });
@@ -78,7 +80,9 @@ describe('init generate-path flag', () => {
             expect(pkgJson).toBeTruthy();
             expect(pkgJson['devDependencies']).toBeTruthy();
             expect(pkgJson['devDependencies']['webpack']).toBeTruthy();
+            expect(pkgJson['devDependencies']['webpack-dev-server']).toBeTruthy();
             expect(pkgJson['scripts']['build'] == 'webpack').toBeTruthy();
+            expect(pkgJson['scripts']['serve'] == 'webpack serve').toBeTruthy();
         };
         expect(pkgJsonTests).not.toThrow();
     });

test/init/generator/init-inquirer.test.js

@@ -46,7 +46,9 @@ describe('init', () => {
             expect(pkgJson).toBeTruthy();
             expect(pkgJson['devDependencies']).toBeTruthy();
             expect(pkgJson['devDependencies']['webpack']).toBeTruthy();
+            expect(pkgJson['devDependencies']['webpack-dev-server']).toBeTruthy();
             expect(pkgJson['scripts']['build'] == 'webpack').toBeTruthy();
+            expect(pkgJson['scripts']['serve'] == 'webpack serve').toBeTruthy();
         };
         expect(pkgJsonTests).not.toThrow();
 

test/init/language/css/init-language-css.test.js

@@ -72,9 +72,11 @@ describe('init with SCSS', () => {
             expect(pkgJson).toBeTruthy();
             expect(pkgJson['devDependencies']).toBeTruthy();
             expect(pkgJson['devDependencies']['webpack']).toBeTruthy();
+            expect(pkgJson['devDependencies']['webpack-dev-server']).toBeTruthy();
             expect(pkgJson['devDependencies']['node-sass']).toBeTruthy();
             expect(pkgJson['devDependencies']['mini-css-extract-plugin']).toBeTruthy();
             expect(pkgJson['scripts']['build'] == 'webpack').toBeTruthy();
+            expect(pkgJson['scripts']['serve'] == 'webpack serve').toBeTruthy();
         };
         expect(pkgJsonTests).not.toThrow();
     });

test/init/language/js/init-language-js.test.js

@@ -56,9 +56,11 @@ describe('init with Typescript', () => {
             expect(pkgJson).toBeTruthy();
             expect(pkgJson['devDependencies']).toBeTruthy();
             expect(pkgJson['devDependencies']['webpack']).toBeTruthy();
+            expect(pkgJson['devDependencies']['webpack-dev-server']).toBeTruthy();
             expect(pkgJson['devDependencies']['typescript']).toBeTruthy();
             expect(pkgJson['devDependencies']['ts-loader']).toBeTruthy();
             expect(pkgJson['scripts']['build'] == 'webpack').toBeTruthy();
+            expect(pkgJson['scripts']['serve'] == 'webpack serve').toBeTruthy();
         };
         expect(pkgJsonTests).not.toThrow();
     });

test/init/multipleEntries/init-multipleEntries.test.js

@@ -51,8 +51,10 @@ describe('init with multiple entries', () => {
             expect(pkgJson).toBeTruthy();
             expect(pkgJson['devDependencies']).toBeTruthy();
             expect(pkgJson['devDependencies']['webpack']).toBeTruthy();
+            expect(pkgJson['devDependencies']['webpack-dev-server']).toBeTruthy();
             expect(pkgJson['devDependencies']['terser-webpack-plugin']).toBeTruthy();
             expect(pkgJson['scripts']['build'] == 'webpack').toBeTruthy();
+            expect(pkgJson['scripts']['serve'] == 'webpack-dev-server').toBeTruthy();
         };
         expect(pkgJsonTests).not.toThrow();
     });