HtmlWebpackPlugin不适用于typescript应用程序
这是我的webpack.config.jsHtmlWebpackPlugin不适用于typescript应用程序,typescript,webpack,Typescript,Webpack,这是我的webpack.config.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: './src/index.tsx', output: { path: path.resolve(__dirname, "build"), filename: 'bundle.js' }
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, "build"),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
}
这是我的package.json
{
"name": "react-ts-todo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0"
},
"devDependencies": {
"@types/react": "^16.1.0",
"@types/react-dom": "^16.0.4",
"awesome-typescript-loader": "^4.0.1",
"html-webpack-plugin": "^3.1.0",
"typescript": "^2.8.1",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
}
}
我可以使用nom start
轻松启动我的网页服务器,但当我更改文件并尝试刷新时。我的网页包开发服务器因错误而崩溃
TypeError: Cannot read property '_tsInstances' of undefined
at resolveInstance (/Users/user1/IdeaProjects/react-ts-todo/node_modules/awesome-typescript-loader/src/instance.ts:73:16)
at /Users/user1/IdeaProjects/react-ts-todo/node_modules/awesome-typescript-loader/src/instance.ts:368:20
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user1/IdeaProjects/react-ts-todo/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:25:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/user1/IdeaProjects/react-ts-todo/node_modules/tapable/lib/Hook.js:35:21)
at Watching._go (/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/Watching.js:40:32)
at Watching._invalidate (/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/Watching.js:164:9)
at watcher.compiler.watchFileSystem.watch (/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/Watching.js:135:10)
at Watchpack.watcher.once (/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/node/NodeWatchFileSystem.js:43:4)
TypeError:无法读取未定义的
在resolveInstance(/Users/user1/IdeaProjects/react ts todo/node_modules/awesome typescript loader/src/instance.ts:73:16)
at/Users/user1/IdeaProjects/react ts todo/node_modules/awesome typescript loader/src/instance.ts:368:20
在AsyncSeriesHook.eval[as callAsync](在创建时进行eval(/Users/user1/IdeaProjects/react ts todo/node_modules/tapable/lib/HookCodeFactory.js:24:12)
但这对我来说并没有一个明确的可操作的解决方案。好的。我找到了答案。我们需要将很棒的typescript加载程序升级到
"awesome-typescript-loader": "^5.0.0-1"
下面的package.json工作正常
{
"name": "react-ts-todo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0"
},
"devDependencies": {
"@types/react": "^16.1.0",
"@types/react-dom": "^16.0.4",
"awesome-typescript-loader": "^5.0.0-1",
"html-webpack-plugin": "^3.1.0",
"typescript": "^2.8.1",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
}
}