webpack 5 migration (#1251)

* start webpack 5 migration

* fixes

* compiles now

* upgrade karma webpack

* drop webpack 4 code branches

* regenerate test output

* Stop testing TypeScript 3.6 and 3.7

* remove flaky test

* delete ignored tests

* upgrade chrome laungcher

* upgrade to 4.1.5

* implement @alexandar-akait's suggestion

* use webpack.sources.RawSource as suggested by @JonWallsten

* upgrade webpack introduce flaky test mechanism for platform

* execution tests on windows execute in c:\source\ts-loader

* ignore test failures on windows

* Update create-and-execute-test.js

* Update create-and-execute-test.js

* Update create-and-execute-test.js

* Update create-and-execute-test.js

* Update create-and-execute-test.js

* Update create-and-execute-test.js

* Update create-and-execute-test.js

* Update create-and-execute-test.js

* Update create-and-execute-test.js

* Update create-and-execute-test.js

* fix test cases on windows (#1273)

* Update after-compile.ts

* Update create-and-execute-test.js

* Update CHANGELOG.md

* make node 12 the minimum version

* Update push.yml

* Update README.md

* remove 3.6 test output

* remove 3.7 test output

* remove 3.8 test output

* remove 3.9 test output

* remove 4.0 test output

* tidy

* fix

* lint should compile too

* delete unused

* remove unused

* upgrade karma

* upgrade fs-extra

* upgrade types and eslint

* remove html-webpack-plugin as unused

* update changelog

* update vanilla example

* use webpack type

* enrich WebpackLoaderContext type

* target es2018

Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>

.devcontainer/devcontainer.json

@@ -11,7 +11,8 @@
 
 	// Add the IDs of extensions you want installed when the container is created.
 	"extensions": [
-		"dbaeumer.vscode-eslint"
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode"
 	],
 
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: ['plugin:node/recommended', 'plugin:prettier/recommended'],
+  extends: ['plugin:node/recommended'/*, 'plugin:prettier/recommended'*/],
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
@@ -20,8 +20,7 @@ module.exports = {
       files: ['*.ts'],
       extends: [
         'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-        'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-        'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+        'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
       ],
       rules: {
         'node/no-unsupported-features/es-syntax': 'off',

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v9.0.0
+
+Breaking changes:
+- minimum webpack version: 5
+- minimum node version: 12
+
+Changes:
+* [webpack 5 migration](https://github.com/TypeStrong/ts-loader/pull/1251) - thanks @johnnyreilly, @jonwallsten, @sokra, @appzuka, @alexandar-akait
+
 ## v8.1.0
 * [feat: remove top-level typescript import statements](https://github.com/TypeStrong/ts-loader/pull/1259) - thanks @ulivz
 

README.md

@@ -129,23 +129,13 @@ If you'd like to see a simple setup take a look at [our simple example](examples
 
 `ts-loader` works very well in combination with [babel](https://babeljs.io/) and [babel-loader](https://github.com/babel/babel-loader). There is an [example](https://github.com/Microsoft/TypeScriptSamples/tree/master/react-flux-babel-karma) of this in the official [TypeScript Samples](https://github.com/Microsoft/TypeScriptSamples). 
 
-### Parallelising Builds
-
-It's possible to parallelise your builds. Historically this was useful from a performance perspective with webpack 2 / 3.  [With webpack 4+ there appears to be significantly less benefit and perhaps even cost.](https://blog.johnnyreilly.com/2018/12/you-might-not-need-thread-loader.html)
-
-But if that's what you want to do, there's two ways to achieve this: [happypack](https://github.com/amireh/happypack) and [thread-loader](https://github.com/webpack-contrib/thread-loader). Both should be used in combination with [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) for typechecking.)
-
-To read more, look at [this post](https://medium.com/webpack/typescript-webpack-super-pursuit-mode-83cc568dea79) by [@johnny_reilly](https://twitter.com/johnny_reilly) on the webpack publication channel.
-
-If you'd like find out further ways to improve your build using the watch API then take a look at [this post](https://medium.com/@kenneth_chau/speeding-up-webpack-typescript-incremental-builds-by-7x-3912ba4c1d15) by [@kenneth_chau](https://twitter.com/kenneth_chau).
-
 ### Compatibility
 
 * TypeScript: 3.6.3+
-* webpack: 4.x+ (please use `ts-loader` 3.x if you need webpack 2 or 3 support)
-* node: 6.11.5 minimum (aligned with webpack 4)
+* webpack: 5.x+ (please use `ts-loader` 8.x if you need webpack 4 support)
+* node: 12.x+
 
-A full test suite runs each night (and on each pull request). It runs both on [Linux](https://travis-ci.org/TypeStrong/ts-loader) and [Windows](https://ci.appveyor.com/project/JohnReilly/ts-loader), testing `ts-loader` against major releases of TypeScript. The test suite also runs against TypeScript@next (because we want to use it as much as you do).
+A full test suite runs each night (and on each pull request). It runs both on Linux and Windows, testing `ts-loader` against major releases of TypeScript. The test suite also runs against TypeScript@next (because we want to use it as much as you do).
 
 If you become aware of issues not caught by the test suite then please let us know. Better yet, write a test and submit it in a PR!
 

examples/vanilla/package.json

@@ -7,10 +7,10 @@
     "start": "webpack-dev-server --mode development --progress --color"
   },
   "devDependencies": {
-    "ts-loader": "^5.0.0",
-    "typescript": "^3.0.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^3.0.0",
+    "ts-loader": "^8.0.0",
+    "typescript": "^4.1.0",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.1.14"
   }
 }

examples/vanilla/webpack.config.js

@@ -3,6 +3,7 @@ const path = require('path');
 
 module.exports = {
     devtool: 'inline-source-map',
+    mode: 'development',
 	entry: './src/index.ts',
 	output: {
 		filename: 'main.js',