使用webpack打包TS时遇到的问题

问题一：html-webpack-plugin与webpack版本不匹配导致的问题

---

//问题
TypeError: Cannot read property 'tap' of undefined
    at HtmlWebpackPlugin.apply (C:\Users\dell\Desktop\ts\01_typescript\03webpack_ts\node_modules\html-webpack-plugin\index.js:40:31)
    at webpack (C:\Users\dell\Desktop\ts\01_typescript\03webpack_ts\node_modules\webpack\lib\webpack.js:51:13)
    at startDevServer (C:\Users\dell\Desktop\ts\01_typescript\03webpack_ts\node_modules\webpack-dev-server\bin\webpack-dev-server.js:94:16)
    at C:\Users\dell\Desktop\ts\01_typescript\03webpack_ts\node_modules\webpack-dev-server\bin\webpack-dev-server.js:166:3
    at C:\Users\dell\Desktop\ts\01_typescript\03webpack_ts\node_modules\webpack-dev-server\lib\utils\processOptions.js:33:9
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 03webpack_ts@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 03webpack_ts@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\dell\AppData\Roaming\npm-cache\_logs\2021-06-01T04_27_05_748Z-debug.log

解决方法：指定html-webpack-plugin的版本。一般最新版的webpack兼容性不太好，所以一般会下载低版本的webpack，那么就导致你下载的webpack与html-webpack-plugin不匹配。

所以指定一下html-webpack-plugin的版本

npm install -D html-webpack-plugin@4.5.0

---

问题二：ts-loader不匹配问题。

---

//问题
ERROR in ./src/main.ts
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (C:\Users\dell\Desktop\ts\01_typescript\03webpack_ts\node_modules\ts-loader\dist\index.js:91:41)
    at Object.loader (C:\Users\dell\Desktop\ts\01_typescript\03webpack_ts\node_modules\ts-loader\dist\index.js:14:21)
i ｢wdm｣: Failed to compile.

解决方法：指定ts-loader的版本。

 npm install -D ts-loader@4.4.2

---

结尾：

---

问题已解决，顺手点个赞。

问题未解决，私聊，评论，滴滴，随时在线。