feat: support webpack4

Author: s-panferov

appveyor.yml

@@ -1,8 +1,7 @@
 environment:
   nodejs_version: "6"
   matrix:
-  - TYPESCRIPT: [email protected]
-  - TYPESCRIPT: [email protected]
+  - TYPESCRIPT: [email protected]
 cache:
  - "%LOCALAPPDATA%\\Yarn"
 install:

lib/runtime.d.ts

@@ -13,7 +13,7 @@
     "build": "rimraf dist && tsc --pretty",
     "lint": "tslint src/*.ts",
     "release": "standard-version",
-    "test": "rimraf .test && mocha --timeout 30000 dist/__test__",
+    "test": "rimraf .test && mocha --trace-warnings --timeout 30000 dist/__test__",
     "precommit": "lint-staged"
   },
   "author": "Stanislav Panferov <[email protected]> (http://panferov.me/)",
@@ -34,29 +34,29 @@
   "homepage": "https://github.com/s-panferov/awesome-typescript-loader",
   "dependencies": {
     "chalk": "^2.3.1",
-    "enhanced-resolve": "3.3.0",
+    "enhanced-resolve": "^4.0.0",
     "loader-utils": "^1.1.0",
-    "lodash": "^4.17.4",
-    "micromatch": "^3.0.3",
+    "lodash": "^4.17.5",
+    "micromatch": "^3.1.9",
     "mkdirp": "^0.5.1",
     "source-map-support": "^0.5.3"
   },
   "peerDependencies": {
-    "typescript": "^2"
+    "typescript": "^2.7"
   },
   "devDependencies": {
     "@types/chai": "^4.0.1",
     "@types/lodash": "^4.14.67",
-    "@types/micromatch": "^2.3.29",
+    "@types/micromatch": "^3.1.0",
     "@types/mocha": "^2.2.41",
     "@types/node": "^8.0.5",
-    "@types/shelljs": "^0.7.2",
+    "@types/shelljs": "^0.7.8",
     "@types/sinon": "^2.3.2",
-    "@types/webpack": "^3.0.1",
+    "@types/webpack": "^4.0.0",
     "bluebird": "^3.5.0",
     "chai": "^4.0.2",
     "empty-module": "0.0.2",
-    "fs-extra": "^3.0.1",
+    "fs-extra": "^5.0.0",
     "mocha": "^3.4.2",
     "ps-node": "^0.1.6",
     "rimraf": "^2.6.1",
@@ -68,6 +68,7 @@
     "lint-staged": "^7.0.0",
     "husky": "^0.14.3",
     "typescript": "^2.7.2",
-    "webpack": "^3.11.0"
+	"webpack": "^4.1.0",
+	"webpack-cli": "^2.0.10"
   }
 }

package.json

@@ -6,7 +6,8 @@ export function config(env) {
 		`
         const path = require('path')
         module.exports = {
-            entry: { index: path.join(process.cwd(), '${env.SRC_DIR}', 'index.ts') },
+			entry: { index: path.join(process.cwd(), '${env.SRC_DIR}', 'index.ts') },
+			mode: 'development',
             output: {
                 path: path.join(process.cwd(), '${env.OUT_DIR}'),
                 filename: '[name].js'
@@ -15,7 +16,7 @@ export function config(env) {
                 extensions: ['.ts', '.tsx', '.js', '.jsx'],
             },
             module: {
-                loaders: [
+                rules: [
                     {
                         test: /\.(tsx?|jsx?)/,
                         loader: path.resolve(process.cwd(), '..', '..', 'index.js'),

src/__test__/compile-output.ts

@@ -5,6 +5,10 @@ import * as child from 'child_process'
 import * as webpack from 'webpack'
 import { exec as shellExec } from 'shelljs'
 
+process.on('unhandledRejection', e => {
+	throw e
+})
+
 import { LoaderConfig } from '../interfaces'
 
 require('source-map-support').install()
@@ -32,8 +36,9 @@ export interface ConfigOptions {
 const TEST_DIR = path.join(process.cwd(), '.test')
 const SRC_DIR = './src'
 const OUT_DIR = './out'
+
 const WEBPACK = path.join(
-	path.dirname(path.dirname(require.resolve('webpack'))),
+	path.dirname(path.dirname(require.resolve('webpack-cli'))),
 	'bin',
 	'webpack.js'
 )
@@ -50,13 +55,13 @@ export function entry(file: string) {
 
 export function query(q: any) {
 	return config => {
-		_.merge(config.module.loaders.find(loader => loader.loader === LOADER).query, q)
+		_.merge(config.module.rules.find(loader => loader.loader === LOADER).query, q)
 	}
 }
 
 export function include(...folders: string[]) {
 	return config => {
-		config.module.loaders.find(loader => loader.loader === LOADER).include.push(
+		config.module.rules.find(loader => loader.loader === LOADER).include.push(
 			...folders.map(f => {
 				return path.join(process.cwd(), f)
 			})
@@ -65,7 +70,8 @@ export function include(...folders: string[]) {
 }
 
 export function webpackConfig(...enchance: any[]): webpack.Configuration {
-	const config = {
+	const config: webpack.Configuration = {
+		mode: 'development',
 		entry: { index: path.join(process.cwd(), SRC_DIR, 'index.ts') },
 		output: {
 			path: path.join(process.cwd(), OUT_DIR),
@@ -75,7 +81,7 @@ export function webpackConfig(...enchance: any[]): webpack.Configuration {
 			extensions: ['.ts', '.tsx', '.js', '.jsx']
 		},
 		module: {
-			loaders: [
+			rules: [
 				{
 					test: /\.(tsx?|jsx?)/,
 					loader: LOADER,
@@ -285,7 +291,7 @@ export function checkOutput(fileName: string, fragment: string) {
 		process.exit()
 	}
 
-	expect(source.replace(/\s/g, '')).include(fragment.replace(/\s/g, ''))
+	expect(source.replace(/([\s\n]|\\n)/g, '')).include(fragment.replace(/([\s\n]|\\n)/g, ''))
 }
 
 export function readOutput(fileName: string) {

src/__test__/utils.ts

@@ -490,7 +490,7 @@ function createChecker(receive: (cb: (msg: Req) => void) => void, send: (msg: Re
 		if (loaderConfig.reportFiles) {
 			filters.push(file => {
 				const fileName = path.relative(context, file.fileName)
-				return micromatch(fileName, loaderConfig.reportFiles).length > 0
+				return micromatch([fileName], loaderConfig.reportFiles).length > 0
 			})
 		}
 		const diagnosticsCollected: boolean[] = new Array(sourceFiles.length)

src/checker/runtime.ts

@@ -8,6 +8,8 @@ import { CompilerInfo, LoaderConfig, TsConfig } from './interfaces'
 import { WatchModeSymbol } from './watch-mode'
 import { createHash } from 'crypto'
 
+import { Compiler } from 'webpack'
+
 import chalk from 'chalk'
 
 let pkg = require('../package.json')
@@ -364,12 +366,10 @@ const filterMtimes = (mtimes: any) => {
 }
 
 function setupWatchRun(compiler, instanceName: string) {
-	compiler.hooks.watchRun.tap('at-loader', function (compiler, callback) {
+	compiler.hooks.watchRun.tapAsync('at-loader', function(compiler, callback) {
 		const instance = resolveInstance(compiler, instanceName)
 		const checker = instance.checker
-		const watcher =
-			compiler.watchFileSystem.watcher ||
-			compiler.watchFileSystem.wfs.watcher
+		const watcher = compiler.watchFileSystem.watcher || compiler.watchFileSystem.wfs.watcher
 
 		const startTime = instance.startTime || compiler.startTime
 		const times = filterMtimes(watcher.getTimes())
@@ -442,7 +442,7 @@ function isWatching(compiler: any): WatchMode {
 }
 
 function setupAfterCompile(compiler, instanceName, forkChecker = false) {
-	compiler.hooks.afterCompile.tap('at-loader', function (compilation, callback) {
+	compiler.hooks.afterCompile.tapAsync('at-loader', function(compilation, callback) {
 		// Don"t add errors for child compilations
 		if (compilation.compiler.isChild()) {
 			callback()

src/instance.ts

@@ -41,6 +41,7 @@ export interface ResolverPlugin {
 }
 
 export interface Resolver {
+	hooks: any
 	apply(plugin: ResolverPlugin): void
 	plugin(source: string, cb: ResolverCallback)
 	doResolve(target: string, req: Request, desc: string, Callback)
@@ -63,8 +64,6 @@ export interface PathPluginOptions {
 }
 
 export class PathPlugin implements ResolverPlugin {
-	source: string
-	target: string
 	ts: typeof ts
 	configFilePath: string
 	options: ts.CompilerOptions
@@ -74,9 +73,6 @@ export class PathPlugin implements ResolverPlugin {
 	absoluteBaseUrl: string
 
 	constructor(config: LoaderConfig & ts.CompilerOptions & PathPluginOptions = {} as any) {
-		this.source = 'described-resolve'
-		this.target = 'resolve'
-
 		this.ts = setupTs(config.compiler).tsImpl
 
 		let context = config.context || process.cwd()
@@ -117,13 +113,16 @@ export class PathPlugin implements ResolverPlugin {
 		let { baseUrl, mappings } = this
 
 		if (baseUrl) {
-			resolver.apply(new ModulesInRootPlugin('module', this.absoluteBaseUrl, 'resolve'))
+			new ModulesInRootPlugin('module', this.absoluteBaseUrl, 'resolve').apply(resolver)
 		}
 
 		mappings.forEach(mapping => {
 			// skip "phantom" type references
 			if (!this.isTyping(mapping.target)) {
-				resolver.plugin(this.source, this.createPlugin(resolver, mapping))
+				resolver.hooks.describedResolve.tapAsync(
+					'at-loader',
+					this.createPlugin(resolver, mapping)
+				)
 			}
 		})
 	}
@@ -133,7 +132,7 @@ export class PathPlugin implements ResolverPlugin {
 	}
 
 	createPlugin(resolver: Resolver, mapping: Mapping) {
-		return (request, callback) => {
+		return (request, info, callback) => {
 			let innerRequest = getInnerRequest(resolver, request)
 			if (!innerRequest) {
 				return callback()
@@ -158,7 +157,7 @@ export class PathPlugin implements ResolverPlugin {
 			}) as Request
 
 			return resolver.doResolve(
-				this.target,
+				'resolve',
 				newRequest,
 				"aliased with mapping '" +
 					innerRequest +

src/paths-plugin.ts

@@ -2,12 +2,12 @@ export const WatchModeSymbol = Symbol('WatchMode')
 
 export class CheckerPlugin {
 	apply(compiler) {
-		compiler.hooks.run.tap('at-loader', function (params, callback) {
+		compiler.hooks.run.tapAsync('at-loader', function(params, callback) {
 			compiler[WatchModeSymbol] = false
 			callback()
 		})
 
-		compiler.hooks.watchRun.tap('at-loader', function (params, callback) {
+		compiler.hooks.watchRun.tapAsync('at-loader', function(params, callback) {
 			compiler[WatchModeSymbol] = true
 			callback()
 		})