抽象的
- 为了用 webpack 编译 TypeScript，我使用 ts-loader。
- 使用 webpack-dev-server 时，错误信息可能显示不正确。
- 存储库：https ://github.com/pvcresin/eslint-ts-loader-error 。
问题
- eslint-loader 不停止编译，显示 ts-loader 错误。
- 即使重写了 TS 代码，ts-loader 错误仍然是旧的。
程序
1.启动开发服务器：yarn start=webpack-dev-server --mode development
包.json
{
"name": "eslint-ts-loader-error",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "2.30.0",
"@typescript-eslint/parser": "2.30.0",
"babel-loader": "8.0.6",
"eslint": "6.8.0",
"eslint-loader": "4.0.2",
"ts-loader": "6.2.2",
"typescript": "3.8.3",
"webpack": "4.33.0",
"webpack-cli": "3.3.4",
"webpack-dev-server": "3.7.1"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist/'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
},
],
},
{
test: /\.(ts|tsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: 'eslint-loader',
options: {
failOnError: true,
},
},
],
},
],
},
};
2. 编辑并保存.ts 文件。
main.ts
const a: string = 100;
console.log(a);
-> 错误：ts-loader（如预期的那样）
ts-loader: Type '100' is not assignable to type 'string'.
3. 编辑并保存.ts 文件。
const a: string = 100;
// console.log(a);
-> 错误：eslint-loader、ts-loader（意外）
eslint-loader: 'a' is assigned a value but never used no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.
【预期】当eslint-loader出错时，停止编译，不显示ts-loader的错误。
4. 编辑并保存.ts 文件。
const a: boolean = 100;
// console.log(a);
-> 错误：eslint-loader、ts-loader（意外）
eslint-loader: 'a' is assigned a value but never used no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.
ts-loader 错误不是最新的，是旧的！
这是否表明处理不取决于 ts-loader？
我不确定为什么会这样。
是 webpack-dev-server 而不是 eslint-loader 的问题吗？
我需要有人帮助我。
环境
- macOS Catalina v10.15.4
- Node.js v12.16.2
- npm v6.14.4
- 纱线 v1.22.4