webpack 5 migration

.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!
 

package.json

@@ -1,12 +1,12 @@
 {
   "name": "ts-loader",
-  "version": "8.1.0",
+  "version": "9.0.0",
   "description": "TypeScript loader for webpack",
   "main": "index.js",
   "types": "dist",
   "scripts": {
     "build": "tsc --version && tsc --project \"./src\"",
-    "lint": "eslint -c .eslintrc.js --ext .ts ./src",
+    "lint": "tsc --project \"./src\" --noEmit && eslint -c .eslintrc.js --ext .ts ./src",
     "comparison-tests": "git clean -xfd test/comparison-tests && npm link ./test/comparison-tests/testLib && node test/comparison-tests/run-tests.js",
     "comparison-tests-generate": "git clean -xfd test/comparison-tests && node test/comparison-tests/stub-new-version.js",
     "execution-tests": "git clean -xfd test/execution-tests && node test/execution-tests/run-tests.js",
@@ -41,7 +41,7 @@
     "ts"
   ],
   "engines": {
-    "node": ">=10.0.0"
+    "node": ">=12.0.0"
   },
   "author": "John Reilly <[email protected]> (https://blog.johnnyreilly.com)",
   "contributors": [
@@ -55,16 +55,15 @@
   "homepage": "https://github.com/TypeStrong/ts-loader",
   "dependencies": {
     "chalk": "^4.1.0",
-    "enhanced-resolve": "^4.0.0",
+    "enhanced-resolve": "^5.0.0",
     "loader-utils": "^2.0.0",
     "micromatch": "^4.0.0",
     "semver": "^7.3.4"
   },
   "devDependencies": {
-    "@types/micromatch": "^3.1.0",
+    "@types/micromatch": "^4.0.0",
     "@types/node": "*",
     "@types/semver": "^7.3.4",
-    "@types/webpack": "^4.4.30",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^4.0.0",
     "babel": "^6.0.0",
@@ -76,29 +75,28 @@
     "babel-preset-react": "^6.0.0",
     "escape-string-regexp": "^2.0.0",
     "eslint": "^7.1.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^8.0.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.3",
-    "fs-extra": "^7.0.0",
+    "fs-extra": "^9.0.0",
     "glob": "^7.1.1",
-    "html-webpack-plugin": "^3.2.0",
     "husky": "^2.0.0",
     "jasmine-core": "^3.0.0",
-    "karma": "^4.0.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-jasmine": "^2.0.0",
+    "karma": "^6.0.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-jasmine": "^4.0.0",
     "karma-mocha-reporter": "^2.0.0",
-    "karma-sourcemap-loader": "^0.3.6",
-    "karma-webpack": "^4.0.0-rc.5",
+    "karma-sourcemap-loader": "^0.3.8",
+    "karma-webpack": "^5.0.0",
     "lint-staged": "^8.0.0",
     "markdown-toc": "^1.2.0",
     "mkdirp": "^0.5.1",
     "mocha": "^6.0.0",
     "prettier": "^2.0.5",
     "rimraf": "^2.6.2",
     "typescript": "^4.0.0",
-    "webpack": "^4.5.0",
-    "webpack-cli": "^3.1.1"
+    "webpack": "^5.20.0",
+    "webpack-cli": "^4.5.0"
   },
   "peerDependencies": {
     "typescript": "*",

src/after-compile.ts

@@ -9,7 +9,6 @@ import {
   LoaderOptions,
   TSFiles,
   TSInstance,
-  WebpackModule,
   TSFile,
 } from './interfaces';
 import {
@@ -34,10 +33,7 @@ export function makeAfterCompile(
   let getCompilerOptionDiagnostics = true;
   let checkAllFilesForErrors = true;
 
-  return (
-    compilation: webpack.compilation.Compilation,
-    callback: () => void
-  ) => {
+  return (compilation: webpack.Compilation, callback: () => void) => {
     // Don't add errors for child compilations
     if (compilation.compiler.isChild()) {
       callback();
@@ -96,7 +92,7 @@ export function makeAfterCompile(
  */
 function provideCompilerOptionDiagnosticErrorsToWebpack(
   getCompilerOptionDiagnostics: boolean,
-  compilation: webpack.compilation.Compilation,
+  compilation: webpack.Compilation,
   instance: TSInstance,
   configFilePath: string | undefined
 ) {
@@ -123,13 +119,13 @@ function provideCompilerOptionDiagnosticErrorsToWebpack(
  * based on filepath
  */
 function determineModules(
-  compilation: webpack.compilation.Compilation,
+  compilation: webpack.Compilation,
   { filePathKeyMapper }: TSInstance
 ) {
-  const modules: Map<FilePathKey, WebpackModule[]> = new Map();
+  const modules: Map<FilePathKey, webpack.Module[]> = new Map();
 
   compilation.modules.forEach(module => {
-    if (module.resource) {
+    if (module instanceof webpack.NormalModule && module.resource) {
       const modulePath = filePathKeyMapper(module.resource);
       const existingModules = modules.get(modulePath);
       if (existingModules !== undefined) {
@@ -197,8 +193,8 @@ function determineFilesToCheckForErrors(
 function provideErrorsToWebpack(
   filesToCheckForErrors: TSFiles,
   filesWithErrors: TSFiles,
-  compilation: webpack.compilation.Compilation,
-  modules: Map<FilePathKey, WebpackModule[]>,
+  compilation: webpack.Compilation,
+  modules: Map<FilePathKey, webpack.Module[]>,
   instance: TSInstance
 ) {
   const {
@@ -281,8 +277,8 @@ function provideErrorsToWebpack(
 }
 
 function provideSolutionErrorsToWebpack(
-  compilation: webpack.compilation.Compilation,
-  modules: Map<FilePathKey, WebpackModule[]>,
+  compilation: webpack.Compilation,
+  modules: Map<FilePathKey, webpack.Module[]>,
   instance: TSInstance
 ) {
   if (
@@ -362,7 +358,7 @@ function provideSolutionErrorsToWebpack(
 function provideDeclarationFilesToWebpack(
   filesToCheckForErrors: TSFiles,
   instance: TSInstance,
-  compilation: webpack.compilation.Compilation
+  compilation: webpack.Compilation
 ) {
   for (const { fileName } of filesToCheckForErrors.values()) {
     if (fileName.match(constants.tsTsxRegex) === null) {
@@ -375,7 +371,7 @@ function provideDeclarationFilesToWebpack(
 
 function addDeclarationFilesAsAsset<T extends ts.OutputFile>(
   outputFiles: T[] | IterableIterator<T>,
-  compilation: webpack.compilation.Compilation,
+  compilation: webpack.Compilation,
   skipOutputFile?: (outputFile: T) => boolean
 ) {
   outputFilesToAsset(outputFiles, compilation, outputFile =>
@@ -387,21 +383,23 @@ function addDeclarationFilesAsAsset<T extends ts.OutputFile>(
 
 function outputFileToAsset(
   outputFile: ts.OutputFile,
-  compilation: webpack.compilation.Compilation
+  compilation: webpack.Compilation
 ) {
-  const assetPath = path.relative(
-    compilation.compiler.outputPath,
-    outputFile.name
+  const assetPath = path
+    .relative(compilation.compiler.outputPath, outputFile.name)
+    // According to @alexander-akait (and @sokra) we should always '/' https://github.com/TypeStrong/ts-loader/pull/1251#issuecomment-799606985
+    .replace(/\\/g, '/');
+
+  // As suggested by @JonWallsten here: https://github.com/TypeStrong/ts-loader/pull/1251#issuecomment-800032753
+  compilation.emitAsset(
+    assetPath,
+    new webpack.sources.RawSource(outputFile.text)
   );
-  compilation.assets[assetPath] = {
-    source: () => outputFile.text,
-    size: () => outputFile.text.length,
-  };
 }
 
 function outputFilesToAsset<T extends ts.OutputFile>(
   outputFiles: T[] | IterableIterator<T>,
-  compilation: webpack.compilation.Compilation,
+  compilation: webpack.Compilation,
   skipOutputFile?: (outputFile: T) => boolean
 ) {
   for (const outputFile of outputFiles) {
@@ -416,7 +414,7 @@ function outputFilesToAsset<T extends ts.OutputFile>(
  */
 function provideTsBuildInfoFilesToWebpack(
   instance: TSInstance,
-  compilation: webpack.compilation.Compilation
+  compilation: webpack.Compilation
 ) {
   if (instance.watchHost) {
     // Ensure emit is complete
@@ -435,7 +433,7 @@ function provideTsBuildInfoFilesToWebpack(
  */
 function provideAssetsFromSolutionBuilderHost(
   instance: TSInstance,
-  compilation: webpack.compilation.Compilation
+  compilation: webpack.Compilation
 ) {
   if (instance.solutionBuilderHost) {
     // written files
@@ -452,36 +450,26 @@ function provideAssetsFromSolutionBuilderHost(
  * the loader, we need to detect and remove any pre-existing errors.
  */
 function removeCompilationTSLoaderErrors(
-  compilation: webpack.compilation.Compilation,
+  compilation: webpack.Compilation,
   loaderOptions: LoaderOptions
 ) {
   compilation.errors = compilation.errors.filter(
-    error => error.loaderSource !== tsLoaderSource(loaderOptions)
+    error => error.details !== tsLoaderSource(loaderOptions)
   );
 }
 
 function removeModuleTSLoaderError(
-  module: WebpackModule,
+  module: webpack.Module,
   loaderOptions: LoaderOptions
 ) {
-  /**
-   * Since webpack 5, the `errors` property is deprecated,
-   * so we can check if some methods for reporting errors exist.
-   */
-  if (!!module.addError) {
-    const warnings = module.getWarnings();
-    const errors = module.getErrors();
-    module.clearWarningsAndErrors();
-
-    Array.from(warnings || []).forEach(warning => module.addWarning(warning));
-    Array.from(errors || [])
-      .filter(
-        (error: any) => error.loaderSource !== tsLoaderSource(loaderOptions)
-      )
-      .forEach(error => module.addError(error));
-  } else {
-    module.errors = module.errors.filter(
-      error => error.loaderSource !== tsLoaderSource(loaderOptions)
-    );
-  }
+  const warnings = module.getWarnings();
+  const errors = module.getErrors();
+  module.clearWarningsAndErrors();
+
+  Array.from(warnings || []).forEach(warning => module.addWarning(warning));
+  Array.from(errors || [])
+    .filter(
+      (error: any) => error.loaderSource !== tsLoaderSource(loaderOptions)
+    )
+    .forEach(error => module.addError(error));
 }