From be9cd64f601218ed32ccbc84d87520a81e774ec7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Ole=C5=9B?= Date: Tue, 26 May 2020 21:51:31 +0200 Subject: [PATCH] docs: add ts-loader example --- .DS_Store | Bin 10244 -> 10244 bytes README.md | 1 + examples/ts-loader/README.md | 3 +++ examples/ts-loader/package.json | 18 ++++++++++++++++++ examples/ts-loader/src/index.ts | 1 + examples/ts-loader/tsconfig.json | 18 ++++++++++++++++++ examples/ts-loader/webpack.config.js | 22 ++++++++++++++++++++++ examples/vscode-tasks/README.md | 2 +- 8 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 examples/ts-loader/README.md create mode 100644 examples/ts-loader/package.json create mode 100644 examples/ts-loader/src/index.ts create mode 100644 examples/ts-loader/tsconfig.json create mode 100644 examples/ts-loader/webpack.config.js diff --git a/.DS_Store b/.DS_Store index 9903b22052f1cb70a52d98026046b4714e06000a..7ae00fcaacb7c8ad04e5fc3a42f3c3a36b9dddf9 100644 GIT binary patch delta 73 zcmZn(XbG6$C7U^hRb%4Qyc2Q0E245eTHnS`IV&Om%`ppCY8}k+< delta 37 tcmZn(XbG6$gHU^hRb@@5`^2P~U;M1ONlY*5(DuJDUxv!W<7GXV9P3?Bdh diff --git a/README.md b/README.md index 7f73c635..d1026985 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ module.exports = { { test: /\.tsx?$/, loader: 'ts-loader', + exclude: /node_modules/, options: { // disable type checker - we will use it in fork plugin transpileOnly: true diff --git a/examples/ts-loader/README.md b/examples/ts-loader/README.md new file mode 100644 index 00000000..358cadb6 --- /dev/null +++ b/examples/ts-loader/README.md @@ -0,0 +1,3 @@ +## ts-loader configuration example + +It's a basic configuration of the plugin and [ts-loader](https://github.com/TypeStrong/ts-loader). diff --git a/examples/ts-loader/package.json b/examples/ts-loader/package.json new file mode 100644 index 00000000..ceae048c --- /dev/null +++ b/examples/ts-loader/package.json @@ -0,0 +1,18 @@ +{ + "name": "fork-ts-checker-webpack-plugin-ts-loader-example", + "version": "0.0.0", + "main": "dist/index.js", + "license": "MIT", + "scripts": { + "dev": "webpack-dev-server", + "build": "webpack -p" + }, + "devDependencies": { + "fork-ts-checker-webpack-plugin": "^5.0.0-alpha.9", + "ts-loader": "^7.0.0", + "typescript": "^3.8.0", + "webpack": "^4.0.0", + "webpack-cli": "^3.0.0", + "webpack-dev-server": "^3.0.0" + } +} diff --git a/examples/ts-loader/src/index.ts b/examples/ts-loader/src/index.ts new file mode 100644 index 00000000..7bc4a71d --- /dev/null +++ b/examples/ts-loader/src/index.ts @@ -0,0 +1 @@ +console.log('Hello world'); diff --git a/examples/ts-loader/tsconfig.json b/examples/ts-loader/tsconfig.json new file mode 100644 index 00000000..c2a0076e --- /dev/null +++ b/examples/ts-loader/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "target": "ES5", + "module": "CommonJS", + "lib": ["ES5", "ScriptHost"], + "moduleResolution": "Node", + "esModuleInterop": true, + "skipLibCheck": true, + "skipDefaultLibCheck": true, + "strict": true, + "baseUrl": "./src", + "outDir": "./dist", + "forceConsistentCasingInFileNames": true, + "importsNotUsedAsValues": "preserve" // this is important for proper files watching + }, + "include": ["./src"], + "exclude": ["node_modules"] +} diff --git a/examples/ts-loader/webpack.config.js b/examples/ts-loader/webpack.config.js new file mode 100644 index 00000000..5cc2f83c --- /dev/null +++ b/examples/ts-loader/webpack.config.js @@ -0,0 +1,22 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); + +module.exports = { + context: __dirname, + entry: './src/index.ts', + resolve: { + extensions: ['.ts', '.tsx', '.js'], + }, + module: { + rules: [ + { + test: /\.tsx?$/, + loader: 'ts-loader', + exclude: /node_modules/, + options: { + transpileOnly: true, + }, + }, + ], + }, + plugins: [new ForkTsCheckerWebpackPlugin()], +}; diff --git a/examples/vscode-tasks/README.md b/examples/vscode-tasks/README.md index f656dec5..7213624e 100644 --- a/examples/vscode-tasks/README.md +++ b/examples/vscode-tasks/README.md @@ -1,4 +1,4 @@ -## VS Code Configuration Example +## VS Code configuration example This example defines `.vscode/tasks.json` file which instructs **VS Code** how to extract errors from the webpack's output to display them in the **Problems** tab. It uses [TypeScript + Webpack Problem Matchers](https://marketplace.visualstudio.com/items?itemName=eamodio.tsl-problem-matcher)