test: add test for order css imported in js and using split chunks

webdiscus · Aug 19, 2024 · 236e2ec · 236e2ec
1 parent 3244e63
commit 236e2ec
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/test/cases/split-chunk-css-order/expected/index.html b/test/cases/split-chunk-css-order/expected/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="main.bundle.css" rel="stylesheet">
+<script src="main.bundle.js" defer></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+</body>
+</html>
diff --git a/test/cases/split-chunk-css-order/expected/main.bundle.css b/test/cases/split-chunk-css-order/expected/main.bundle.css
@@ -0,0 +1,5 @@
+h1 {
+  color: red;
+}h2 {
+  color: green;
+}
diff --git a/test/cases/split-chunk-css-order/expected/main.bundle.js b/test/cases/split-chunk-css-order/expected/main.bundle.js
@@ -0,0 +1 @@
+(()=>{"use strict";console.log(">> main.js")})();
diff --git a/test/cases/split-chunk-css-order/src/index.html b/test/cases/split-chunk-css-order/src/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="./main.js" defer></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+</body>
+</html>
diff --git a/test/cases/split-chunk-css-order/src/main.js b/test/cases/split-chunk-css-order/src/main.js
@@ -0,0 +1,4 @@
+import './style1.css';
+import './style2.css';
+
+console.log('>> main.js');
diff --git a/test/cases/split-chunk-css-order/src/style1.css b/test/cases/split-chunk-css-order/src/style1.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/split-chunk-css-order/src/style2.css b/test/cases/split-chunk-css-order/src/style2.css
@@ -0,0 +1,3 @@
+h2 {
+  color: green;
+}
diff --git a/test/cases/split-chunk-css-order/webpack.config.js b/test/cases/split-chunk-css-order/webpack.config.js
@@ -0,0 +1,59 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+      js: {
+        filename: '[name].bundle.js',
+      },
+      css: {
+        filename: '[name].bundle.css',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css|sass|scss)$/,
+        use: ['css-loader'],
+      },
+    ],
+  },
+
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        style1: {
+          test: /style1/,
+          enforce: true,
+        },
+        style2: {
+          test: /style2/,
+          enforce: true,
+        },
+        defaultVendors: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+          reuseExistingChunk: true,
+        },
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true,
+        },
+      },
+    },
+  },
+};
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -405,9 +405,11 @@ describe('split chunks', () => {
   test('resolve assets, production', () => compareFiles('split-chunk-resolve-assets-prod'));
   test('load vendor scripts from node module', () => compareFiles('split-chunk-vendor'));
 
+  test('order css using split chunks ', () => compareFiles('split-chunk-css-order'));
+
   // ATTENTION: this test doesn't work and never will be works.
   // This is just to demonstrate how a split of CSS files cannot be used. CSS files cannot be split.
-  // test('extract css from split chunks ', () => compareFiles('split-chunk-css');
+  // test('extract css from split chunks ', () => compareFiles('split-chunk-css'));
 });
 
 describe('real content hash', () => {