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

一、安装各种依赖

npm install -y

tsc --init

npm i -D typescript@4.0.5

npm i -D webpack@4.41.5 webpack-cli@3.3.10

npm i -D webpack-dev-server@3.10.2    --------------启动开发服务器的

npm i -D html-webpack-plugin@4.0.0-alpha clean-webpack-plugin ----对html内容进行打包/清除之前打包好的js文件

npm i -D ts-loader@8.0.11   ---------------针对ts文件进行编译处理

npm i -D cross-env   -------------涉及跨平台命令

1.npm install -y

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path G:\TypeScript\lianxi\webpack-ceshi/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'G:\TypeScript\lianxi\webpack-ceshi\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\dell\AppData\Local\npm-cache\_logs\2023-04-28T11_07_01_079Z-debug-0.log

2.遇到的问题

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 428 packages, and audited 430 packages in 54s

11 packages are looking for funding
  run `npm fund` for details

6 vulnerabilities (4 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.

PS G:\TypeScript\lianxi\webpack-ceshi> npm i -D webpack-dev-server@3.10.2
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 191 packages, and audited 621 packages in 57s

29 packages are looking for funding
  run `npm fund` for details

13 vulnerabilities (1 low, 3 moderate, 7 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.

安装时均会遇到如下的问题，就不一一列举了。

29 packages are looking for funding
  run `npm fund` for details

13 vulnerabilities (1 low, 3 moderate, 7 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.

3.安装完成时各种插件的版本号如图

4.解决办法

安装依赖时要用最新版本，不用指定版本号

npm init -y
tsc --init                               产生对应的ts.config.js文件
npm install -D typescript
npm install -D webpack webpack-cli
npm install -D webpack-dev-server      启动开发服务器的
npm install -D html-webpack-plugin clean-webpack-plugin                      对html内容进行打包 / 清除之前打包好的js文件
npm install -D ts-loader    针对ts文件进行编译处理
npm install -D cross-env           涉及跨平台命令

二、执行 npm run build时遇到的问题

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> 03webpack-ts@1.0.0 build
> cross-env NODE_ENV=production webpack --config build/webpack.config.js

Hash: cd7ca17d5afdc172c4c2
Version: webpack 4.41.5
Time: 3732ms
Built at: 2023/04/28 19:24:08
 2 assets
Entrypoint app = app.0656762f.js app.0656762f.js.map
[0] ./src/main.ts 47 bytes {0} [built]

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(680,34)
      TS1005: '?' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(681,17)
      TS1005: ':' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(682,17)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(685,34)
      TS1005: '?' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(686,17)
      TS1005: ':' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(687,17)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(687,26)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(688,5)
      TS1109: Expression expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(692,24)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(696,35)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(702,39)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(706,21)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,19)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,27)
      TS1005: ':' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,36)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,55)
      TS1005: '{' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,64)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,77)
      TS1005: ',' expected.

ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(715,22)
      TS1005: ',' expected.
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 194 bytes {0} [built]
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 1 hidden module

对应的 dist 文件夹也没有。

2.解决办法：

如果插件是最新版本，打包时就不会出现问题了。

三.执行npm run dev遇到的问题

页面会有输出，但是报错

client56b6:159

G:\TypeScript\lianxi\webpackceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl]ERRORinG:\TypeScript\lianxi\webpackceshi\node_modules\@types\node\ts4.8\test.d.ts(680,34)
   TS1005: '?' expected.

 解决办法：

安装最新版本不会出现这样的问题，会出现新的问题。

3.npm run dev遇到的问题二

PS G:\TypeScript\lianxi\webpack-ts> npm run dev
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> webpack-ts@1.0.0 dev
> cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

解决办法：

将webpack.config.js 文件中的一条语句给删掉即可。会继续遇到问题

 //针对于代码的错误提示

devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

4.npm run dev遇到的问题三

PS G:\TypeScript\lianxi\webpack-ts> npm run dev
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> webpack-ts@1.0.0 dev
> cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'stats'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }      

解决办法：

将webpack.config.js 文件中的一条语句给删掉即可。

stats: 'errors-only', // 打包日志输出输出错误信息

npm run dev正确运行时在控制台的输出为：

5.测试时遇到的问题

在文件主入口输入   document.write("hello ts!!!")     进行测试

页面没有正常输出,hello ts!!!

 解决办法：

换成console.log("hello ts!!!");在控制台就可以正常输出，并不报错。（应该是浏览器的原因）