fix(generators): correct optimization.splitChunks option in config (#…

…2008) * fix(generators): update optimization.splitChunks option * tests: init-generator
webpack · Nov 2, 2020 · f86ef2d · f86ef2d
1 parent e995923
commit f86ef2d
Show file tree

Hide file tree

Showing 3 changed files with 290 additions and 1 deletion.
diff --git a/packages/generators/__tests__/__snapshots__/init-generator.test.ts.snap b/packages/generators/__tests__/__snapshots__/init-generator.test.ts.snap
@@ -0,0 +1,275 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`init generator generates a webpack config that uses ES6 1`] = `
+Object {
+  "mode": "'development'",
+  "module": Object {
+    "rules": Array [
+      Object {
+        "include": Array [
+          "path.resolve(__dirname, 'src')",
+        ],
+        "loader": "'babel-loader'",
+        "test": "/\\\\.(js|jsx)$/",
+      },
+    ],
+  },
+  "optimization": Object {
+    "minimizer": Array [
+      "new TerserPlugin()",
+    ],
+    "splitChunks": Object {
+      "cacheGroups": Object {
+        "vendors": Object {
+          "priority": -10,
+          "test": "/[\\\\\\\\/]node_modules[\\\\\\\\/]/",
+        },
+      },
+      "chunks": "'async'",
+      "minChunks": 1,
+      "minSize": 30000,
+      "name": false,
+    },
+  },
+  "plugins": Array [
+    "new webpack.ProgressPlugin()",
+  ],
+}
+`;
+
+exports[`init generator generates a webpack config that uses Typescript 1`] = `
+Object {
+  "entry": "'./src/index.ts'",
+  "mode": "'development'",
+  "module": Object {
+    "rules": Array [
+      Object {
+        "exclude": Array [
+          "/node_modules/",
+        ],
+        "include": Array [
+          "path.resolve(__dirname, 'src')",
+        ],
+        "loader": "'ts-loader'",
+        "test": "/\\\\.(ts|tsx)$/",
+      },
+    ],
+  },
+  "optimization": Object {
+    "minimizer": Array [
+      "new TerserPlugin()",
+    ],
+    "splitChunks": Object {
+      "cacheGroups": Object {
+        "vendors": Object {
+          "priority": -10,
+          "test": "/[\\\\\\\\/]node_modules[\\\\\\\\/]/",
+        },
+      },
+      "chunks": "'async'",
+      "minChunks": 1,
+      "minSize": 30000,
+      "name": false,
+    },
+  },
+  "plugins": Array [
+    "new webpack.ProgressPlugin()",
+  ],
+  "resolve": Object {
+    "extensions": Array [
+      "'.tsx'",
+      "'.ts'",
+      "'.js'",
+    ],
+  },
+}
+`;
+
+exports[`init generator generates a webpack config using CSS with mini-css-extract-plugin 1`] = `
+Object {
+  "mode": "'development'",
+  "module": Object {
+    "rules": Array [
+      Object {
+        "test": "/.css$/",
+        "use": Array [
+          Object {
+            "loader": "MiniCssExtractPlugin.loader",
+          },
+          Object {
+            "loader": "\\"style-loader\\"",
+          },
+          Object {
+            "loader": "\\"css-loader\\"",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  "optimization": Object {
+    "minimizer": Array [
+      "new TerserPlugin()",
+    ],
+    "splitChunks": Object {
+      "cacheGroups": Object {
+        "vendors": Object {
+          "priority": -10,
+          "test": "/[\\\\\\\\/]node_modules[\\\\\\\\/]/",
+        },
+      },
+      "chunks": "'async'",
+      "minChunks": 1,
+      "minSize": 30000,
+      "name": false,
+    },
+  },
+  "plugins": Array [
+    "new webpack.ProgressPlugin()",
+    "new MiniCssExtractPlugin({ filename:'main.[chunkhash].css' })",
+  ],
+}
+`;
+
+exports[`init generator generates a webpack config using CSS without mini-css-extract-plugin 1`] = `
+Object {
+  "mode": "'development'",
+  "module": Object {
+    "rules": Array [
+      Object {
+        "test": "/.css$/",
+        "use": Array [
+          Object {
+            "loader": "\\"style-loader\\"",
+          },
+          Object {
+            "loader": "\\"css-loader\\"",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  "optimization": Object {
+    "minimizer": Array [
+      "new TerserPlugin()",
+    ],
+    "splitChunks": Object {
+      "cacheGroups": Object {
+        "vendors": Object {
+          "priority": -10,
+          "test": "/[\\\\\\\\/]node_modules[\\\\\\\\/]/",
+        },
+      },
+      "chunks": "'async'",
+      "minChunks": 1,
+      "minSize": 30000,
+      "name": false,
+    },
+  },
+  "plugins": Array [
+    "new webpack.ProgressPlugin()",
+  ],
+}
+`;
+
+exports[`init generator generates a webpack config with custom entry and output 1`] = `
+Object {
+  "entry": "'./src/index2.js'",
+  "mode": "'development'",
+  "module": Object {
+    "rules": Array [],
+  },
+  "optimization": Object {
+    "minimizer": Array [
+      "new TerserPlugin()",
+    ],
+    "splitChunks": Object {
+      "cacheGroups": Object {
+        "vendors": Object {
+          "priority": -10,
+          "test": "/[\\\\\\\\/]node_modules[\\\\\\\\/]/",
+        },
+      },
+      "chunks": "'async'",
+      "minChunks": 1,
+      "minSize": 30000,
+      "name": false,
+    },
+  },
+  "output": Object {
+    "path": "path.resolve(__dirname, 'dist2')",
+  },
+  "plugins": Array [
+    "new webpack.ProgressPlugin()",
+  ],
+}
+`;
+
+exports[`init generator generates a webpack config with default options 1`] = `
+Object {
+  "devServer": Object {
+    "open": true,
+  },
+  "mode": "'production'",
+  "module": Object {
+    "rules": Array [],
+  },
+  "optimization": Object {
+    "minimizer": Array [
+      "new TerserPlugin()",
+    ],
+    "splitChunks": Object {
+      "chunks": "'all'",
+    },
+  },
+  "plugins": Array [
+    "new webpack.ProgressPlugin()",
+    "new HtmlWebpackPlugin({
+					template: 'index.html'
+				})",
+    "new workboxPlugin.GenerateSW({
+				swDest: 'sw.js',
+				clientsClaim: true,
+				skipWaiting: false,
+			})",
+  ],
+}
+`;
+
+exports[`init generator generates a webpack config with multiple entries 1`] = `
+Object {
+  "entry": Object {
+    "test1": "'./dir1/test1.js'",
+    "test2": "'./dir2/test2.js'",
+  },
+  "mode": "'development'",
+  "module": Object {
+    "rules": Array [],
+  },
+  "optimization": Object {
+    "minimizer": Array [
+      "new TerserPlugin()",
+    ],
+    "splitChunks": Object {
+      "cacheGroups": Object {
+        "vendors": Object {
+          "priority": -10,
+          "test": "/[\\\\\\\\/]node_modules[\\\\\\\\/]/",
+        },
+      },
+      "chunks": "'async'",
+      "minChunks": 1,
+      "minSize": 30000,
+      "name": false,
+    },
+  },
+  "plugins": Array [
+    "new webpack.ProgressPlugin()",
+  ],
+}
+`;
diff --git a/packages/generators/__tests__/init-generator.test.ts b/packages/generators/__tests__/init-generator.test.ts
@@ -32,6 +32,8 @@ describe('init generator', () => {
         expect(config.output).toEqual(undefined);
         // there are no special loaders, so rules should be empty
         expect(config.module.rules).toEqual([]);
+        // match config snapshot
+        expect(config).toMatchSnapshot();
     });
 
     it('generates a webpack config with custom entry and output', async () => {
@@ -61,6 +63,8 @@ describe('init generator', () => {
         expect(config.output.path).toEqual("path.resolve(__dirname, 'dist2')");
         // there are no special loaders, so rules should be empty
         expect(config.module.rules).toEqual([]);
+        //match config snapshot
+        expect(config).toMatchSnapshot();
     });
 
     it('generates a webpack config using CSS without mini-css-extract-plugin', async () => {
@@ -85,6 +89,8 @@ describe('init generator', () => {
         expect(config.module.rules[0].use.length).toEqual(2);
         expect(config.module.rules[0].use[0].loader).toEqual('"style-loader"');
         expect(config.module.rules[0].use[1].loader).toEqual('"css-loader"');
+        //match config snapshot
+        expect(config).toMatchSnapshot();
     });
 
     it('generates a webpack config using CSS with mini-css-extract-plugin', async () => {
@@ -111,6 +117,8 @@ describe('init generator', () => {
         expect(config.module.rules[0].use[0].loader).toEqual('MiniCssExtractPlugin.loader');
         expect(config.module.rules[0].use[1].loader).toEqual('"style-loader"');
         expect(config.module.rules[0].use[2].loader).toEqual('"css-loader"');
+        //match config snapshot
+        expect(config).toMatchSnapshot();
     });
 
     it('generates a webpack config with multiple entries', async () => {
@@ -140,6 +148,8 @@ describe('init generator', () => {
             test1: "'./dir1/test1.js'",
             test2: "'./dir2/test2.js'",
         });
+        //match config snapshot
+        expect(config).toMatchSnapshot();
     });
 
     it('generates a webpack config that uses ES6', async () => {
@@ -166,6 +176,8 @@ describe('init generator', () => {
                 loader: "'babel-loader'",
             },
         ]);
+        //match config snapshot
+        expect(config).toMatchSnapshot();
     });
 
     it('generates a webpack config that uses Typescript', async () => {
@@ -193,5 +205,7 @@ describe('init generator', () => {
                 exclude: ['/node_modules/'],
             },
         ]);
+        //match config snapshot
+        expect(config).toMatchSnapshot();
     });
 });
diff --git a/packages/generators/src/utils/webpackConfig.ts b/packages/generators/src/utils/webpackConfig.ts
@@ -15,7 +15,7 @@ export function getDefaultOptimization(usingDefaults: boolean): WebpackOptions['
                 chunks: "'async'",
                 minChunks: 1,
                 minSize: 30000,
-                name: !usingDefaults,
+                name: false,
             },
         };
     } else {