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

Posted 2021-06-15 前端世界升级打怪

问题一：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

---

结尾：

---

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

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