fix: support webpack@5 (#477)

Author: evilebottnawi

azure-pipelines.yml

@@ -56,7 +56,6 @@ jobs:
         node-10-canary:
           node_version: ^10.13.0
           webpack_version: next
-          continue_on_error: true
     steps:
       - task: NodeTool@0
         inputs:
@@ -78,7 +77,7 @@ jobs:
         displayName: 'Install dependencies'
       - script: npm i webpack@$(webpack_version)
         displayName: 'Install "webpack@$(webpack_version)"'
-      - script: npm run test:coverage -- --ci --reporters="default" --reporters="jest-junit" || $(continue_on_error)
+      - script: npm run test:coverage -- --ci --reporters="default" --reporters="jest-junit"
         displayName: 'Run tests with coverage'
       - task: PublishTestResults@2
         inputs:
@@ -114,7 +113,6 @@ jobs:
         node-10-canary:
           node_version: ^10.13.0
           webpack_version: next
-          continue_on_error: true
     steps:
       - task: NodeTool@0
         inputs:
@@ -136,7 +134,7 @@ jobs:
         displayName: 'Install dependencies'
       - script: npm i webpack@$(webpack_version)
         displayName: 'Install "webpack@$(webpack_version)"'
-      - script: npm run test:coverage -- --ci --reporters="default" --reporters="jest-junit" || $(continue_on_error)
+      - script: npm run test:coverage -- --ci --reporters="default" --reporters="jest-junit"
         displayName: 'Run tests with coverage'
       - task: PublishTestResults@2
         inputs:
@@ -172,7 +170,6 @@ jobs:
         node-10-canary:
           node_version: ^10.13.0
           webpack_version: next
-          continue_on_error: true
     steps:
       - script: 'git config --global core.autocrlf input'
         displayName: 'Config git core.autocrlf'
@@ -197,7 +194,7 @@ jobs:
         displayName: 'Install dependencies'
       - script: npm i webpack@$(webpack_version)
         displayName: 'Install "webpack@$(webpack_version)"'
-      - script: npm run test:coverage -- --ci --reporters="default" --reporters="jest-junit" || $(continue_on_error)
+      - script: npm run test:coverage -- --ci --reporters="default" --reporters="jest-junit"
         displayName: 'Run tests with coverage'
       - task: PublishTestResults@2
         inputs:

package-lock.json

@@ -36,7 +36,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "webpack": "^4.4.0"
+    "webpack": "^4.4.0 || ^5.0.0"
   },
   "dependencies": {
     "loader-utils": "^1.1.0",
@@ -72,7 +72,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
     "standard-version": "^7.0.1",
-    "webpack": "^4.41.3",
+    "webpack": "^4.41.4",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2"
   },

package.json

@@ -26,10 +26,14 @@ function compareDirectory(actual, expected) {
 }
 
 function compareWarning(actual, expectedFile) {
-  if (!fs.existsSync(expectedFile)) return;
+  if (!fs.existsSync(expectedFile)) {
+    return;
+  }
+
+  // eslint-disable-next-line global-require, import/no-dynamic-require
+  const expected = require(expectedFile);
 
-  const expected = require(expectedFile); // eslint-disable-line global-require,import/no-dynamic-require
-  expect(actual).toBe(expected);
+  expect(actual.trim()).toBe(expected.trim());
 }
 
 describe('TestCases', () => {
@@ -97,8 +101,19 @@ describe('TestCases', () => {
           }
 
           const expectedDirectory = path.resolve(directoryForCase, 'expected');
+          const expectedDirectoryByVersion = path.join(
+            expectedDirectory,
+            `webpack-${webpack.version[0]}`
+          );
 
-          compareDirectory(outputDirectoryForCase, expectedDirectory);
+          if (fs.existsSync(expectedDirectoryByVersion)) {
+            compareDirectory(
+              outputDirectoryForCase,
+              expectedDirectoryByVersion
+            );
+          } else {
+            compareDirectory(outputDirectoryForCase, expectedDirectory);
+          }
 
           const expectedWarning = path.resolve(directoryForCase, 'warnings.js');
           const actualWarning = stats.toString({

test/TestCases.test.js

@@ -1,2 +1,4 @@
+/* eslint-disable-next-line no-unused-expressions */
 import(/* webpackChunkName: "async-1" */ './async-1.css');
+/* eslint-disable-next-line no-unused-expressions */
 import(/* webpackChunkName: "async-2" */ './async-2.css');

test/cases/composes-async/index.js

@@ -0,0 +1,24 @@
+@import url(https://some/other/external/css);
+@import url(https://some/external/css);
+body {
+  background: red;
+}
+
+.c {
+  background: red;
+}
+
+.c {
+  color: yellow;
+}
+
+.b {
+  background: red;
+}
+
+.b {
+  color: yellow;
+}
+
+
+

test/cases/hmr/expected/main.css renamed to test/cases/hmr/expected/webpack-4/main.css

@@ -0,0 +1,7 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	/************************************************************************/
+// extracted by mini-css-extract-plugin
+    if(false) { var cssReload; }
+  
+/******/ })()
+;

test/cases/hmr/expected/main.js renamed to test/cases/hmr/expected/webpack-4/main.js

@@ -1 +1,2 @@
+/* eslint-disable-next-line no-unused-expressions */
 import(/* webpackChunkName: "style" */ './style.css');

test/cases/hmr/expected/webpack-5/main.css

@@ -32,11 +32,11 @@ module.exports = [1, 2].map((n) => {
       ],
     },
     output: {
-      filename: `[name].[contenthash].js`,
+      filename: `[name].[contenthash].${n}.js`,
     },
     plugins: [
       new Self({
-        filename: `[name].[chunkhash].css`,
+        filename: `[name].[contenthash].${n}.css`,
       }),
     ],
   };

test/cases/hmr/expected/webpack-5/main.js

@@ -1,4 +1,5 @@
 import './a.css';
 import './b.css';
 
+/* eslint-disable-next-line no-unused-expressions */
 import(/* webpackChunkName: 'async-one' */ './async-one');

test/cases/js-hash/expected/style.bd79177c6f3a3eac7e30.css renamed to test/cases/js-hash/expected/style.922798e08e96756adb4a.1.css

@@ -1,4 +1,5 @@
 import './b.css';
 import './a.css';
 
+/* eslint-disable-next-line no-unused-expressions */
 import(/* webpackChunkName: 'async-two' */ './async-two');

test/cases/js-hash/expected/style.797a7f363182ad9c5fdf.css renamed to test/cases/js-hash/expected/style.fe78b7a6c50df391f00c.2.css

@@ -1,4 +1,5 @@
 import './a.css';
 import './b.css';
 
+/* eslint-disable-next-line no-unused-expressions */
 import('./c.css');

test/cases/js-hash/index.js

@@ -1,5 +1,7 @@
 import './a.css';
 import './b.css';
 
+/* eslint-disable-next-line no-unused-expressions */
 import(/* webpackChunkName: 'async-one' */ './async-one');
+/* eslint-disable-next-line no-unused-expressions */
 import(/* webpackChunkName: 'async-two' */ './async-two');

test/cases/js-hash/webpack.config.js

@@ -1,5 +1,7 @@
 import './a.css';
 import './b.css';
 
+/* eslint-disable-next-line no-unused-expressions */
 import(/* webpackChunkName: 'async-one' */ './async-one');
+/* eslint-disable-next-line no-unused-expressions */
 import(/* webpackChunkName: 'async-two' */ './async-two');

test/cases/multiple-entry/index-one.js

@@ -1,5 +1,7 @@
 import './main.css';
 
+/* eslint-disable-next-line no-unused-expressions */
 import('./async');
 
+/* eslint-disable-next-line no-unused-expressions */
 import('./async.css');

test/cases/multiple-entry/index-two.js

@@ -1,5 +1,7 @@
 import './main.css';
 
+/* eslint-disable-next-line no-unused-expressions */
 import('./async');
 
+/* eslint-disable-next-line no-unused-expressions */
 import('./async.css');

test/cases/shared-import/index.js

@@ -3,5 +3,7 @@ import './e1.css';
 import './e2.css';
 import './f.css';
 
+/* eslint-disable-next-line no-unused-expressions */
 import('./chunk1');
+/* eslint-disable-next-line no-unused-expressions */
 import('./chunk2');

test/cases/simple-async-load-css-fallback/index.js

@@ -15,6 +15,7 @@ module.exports = {
       chunks: 'all',
       cacheGroups: {
         vendors: {
+          name: 'vendors',
           test: /node_modules/,
           enforce: true,
         },