typescript - 尝试使用空 ts 项目初始化 webpack 时出错

Question

我是一个 webpack 新手，我想自己第一次设置它。安装必要的包并创建一个只有 console.log('hi'); 的空 app.ts 之后，我运行 npm run start，webpack 应该只编译并运行顺利。

但是，我从 webpack 得到了一堆错误，说 node_modules 中的多个 lib 文件不存在。我重建并仔细检查了 node_modules 文件夹，lib 文件确实存在并且就在那里。所以我对编译错误感到困惑。看起来很简单，这些错误不是我造成的？请帮忙？

这里有完整的错误信息，如果有帮助...

$ npm run build

> demo@1.0.0 build
> webpack

asset bundle.js 655 bytes [compared for emit] (name: main)
./src/app.ts 58 bytes [built] [code generated]
webpack 5.62.1 compiled successfully in 1949 ms


$ npm run start

> demo@1.0.0 start
> webpack-dev-server --stats-error-details

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.138:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'E:\Udemy\typescript\CourseProject\public' directory
asset bundle.js 427 KiB [emitted] (name: main)
runtime modules 26.3 KiB 13 modules
modules by path ./node_modules/ 119 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 52.7 KiB 12 modules
  modules by path ./node_modules/webpack/hot/*.js 3.01 KiB
    ./node_modules/webpack/hot/dev-server.js 1.59 KiB [built] [code generated] 
    ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]        
    ./node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]    
  modules by path ./node_modules/url/ 37.1 KiB
    ./node_modules/url/url.js 22.8 KiB [built] [code generated]
    ./node_modules/url/node_modules/punycode/punycode.js 14.3 KiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/app.ts 58 bytes [built] [code generated]

ERROR in ./node_modules/html-entities/lib/index.js 14:25-54
Module not found: Error: Can't resolve './named-references' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
resolve './named-references' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib/named-references)      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\named-references doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\named-references.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\named-referencesjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\named-references doesn't exist
 @ ./node_modules/webpack-dev-server/client/overlay.js 4:0-39 148:26-32
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 6:0-57 77:6-10 115:6-10 124:6-10 142:27-40 158:6-10 167:28-41 183:6-10 193:6-10

ERROR in ./node_modules/html-entities/lib/index.js 15:28-60
Module not found: Error: Can't resolve './numeric-unicode-map' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
resolve './numeric-unicode-map' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib/numeric-unicode-map)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\numeric-unicode-map doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\numeric-unicode-map.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\numeric-unicode-mapjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\numeric-unicode-map doesn't exist
 @ ./node_modules/webpack-dev-server/client/overlay.js 4:0-39 148:26-32
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 6:0-57 77:6-10 115:6-10 124:6-10 142:27-40 158:6-10 167:28-41 183:6-10 193:6-10

ERROR in ./node_modules/html-entities/lib/index.js 16:24-52
Module not found: Error: Can't resolve './surrogate-pairs' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
resolve './surrogate-pairs' in 'E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\html-entities\package.json (relative path: ./lib/surrogate-pairs) 
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\surrogate-pairs doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\surrogate-pairs.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\surrogate-pairsjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\html-entities\lib\surrogate-pairs doesn't exist
 @ ./node_modules/webpack-dev-server/client/overlay.js 4:0-39 148:26-32
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 6:0-57 77:6-10 115:6-10 124:6-10 142:27-40 158:6-10 167:28-41 183:6-10 193:6-10

ERROR in ./node_modules/url/url.js 25:11-28
Module not found: Error: Can't resolve './util' in 'E:\Udemy\typescript\CourseProject\node_modules\url'
resolve './util' in 'E:\Udemy\typescript\CourseProject\node_modules\url'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\url\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\url\package.json (relative path: ./util)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\url\util doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\url\util.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\url\utiljs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\url\util doesn't exist
 @ ./node_modules/webpack-dev-server/client/utils/parseURL.js 1:0-22 35:16-25
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 4:0-43 23:26-34

ERROR in ./node_modules/url/url.js 100:18-40
Module not found: Error: Can't resolve 'querystring' in 'E:\Udemy\typescript\CourseProject\node_modules\url'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
        - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "querystring": false }
resolve 'querystring' in 'E:\Udemy\typescript\CourseProject\node_modules\url'
  Parsed request is a module
  using description file: E:\Udemy\typescript\CourseProject\node_modules\url\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in E:\Udemy\typescript\CourseProject\node_modules\url\node_modules
        single file module
          using description file: E:\Udemy\typescript\CourseProject\node_modules\url\package.json (relative path: ./node_modules/querystring)            no extension
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\url\node_modules\querystring doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\url\node_modules\querystring.ts doesn't exist
            js
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\url\node_modules\querystringjs doesn't exist
        E:\Udemy\typescript\CourseProject\node_modules\url\node_modules\querystring doesn't exist
      E:\Udemy\typescript\CourseProject\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in E:\Udemy\typescript\CourseProject\node_modules
        single file module
          using description file: E:\Udemy\typescript\CourseProject\package.json (relative path: ./node_modules/querystring)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\querystring is not a file
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\querystring.ts doesn't exist
            js
              Field 'browser' doesn't contain a valid alias configuration
              E:\Udemy\typescript\CourseProject\node_modules\querystringjs doesn't exist
        existing directory E:\Udemy\typescript\CourseProject\node_modules\querystring
          using description file: E:\Udemy\typescript\CourseProject\node_modules\querystring\package.json (relative path: .)
            using description file: E:\Udemy\typescript\CourseProject\package.json (relative path: ./node_modules/querystring)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                E:\Udemy\typescript\CourseProject\node_modules\querystring is not a file
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                E:\Udemy\typescript\CourseProject\node_modules\querystring.ts doesn't exist
              js
                Field 'browser' doesn't contain a valid alias configuration
                E:\Udemy\typescript\CourseProject\node_modules\querystringjs doesn't exist
              as directory
                existing directory E:\Udemy\typescript\CourseProject\node_modules\querystring
                  using description file: E:\Udemy\typescript\CourseProject\node_modules\querystring\package.json (relative path: .)
                    using path: E:\Udemy\typescript\CourseProject\node_modules\querystring\index
                      using description file: E:\Udemy\typescript\CourseProject\node_modules\querystring\package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          E:\Udemy\typescript\CourseProject\node_modules\querystring\index doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          E:\Udemy\typescript\CourseProject\node_modules\querystring\index.ts doesn't exist
                        js
                          Field 'browser' doesn't contain a valid alias configuration
                          E:\Udemy\typescript\CourseProject\node_modules\querystring\indexjs doesn't exist
      E:\Udemy\typescript\node_modules doesn't exist or is not a directory
      E:\Udemy\node_modules doesn't exist or is not a directory
      E:\node_modules doesn't exist or is not a directory
 @ ./node_modules/webpack-dev-server/client/utils/parseURL.js 1:0-22 35:16-25
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 4:0-43 23:26-34

ERROR in ./node_modules/webpack/hot/dev-server.js 11:11-27
Module not found: Error: Can't resolve './log' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
resolve './log' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot/log)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\logjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log doesn't exist

ERROR in ./node_modules/webpack/hot/dev-server.js 30:4-33
Module not found: Error: Can't resolve './log-apply-result' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
resolve './log-apply-result' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot/log-apply-result)      
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log-apply-result doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log-apply-result.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log-apply-resultjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\log-apply-result doesn't exist

ERROR in ./node_modules/webpack/hot/dev-server.js 50:18-38
Module not found: Error: Can't resolve './emitter' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
resolve './emitter' in 'E:\Udemy\typescript\CourseProject\node_modules\webpack\hot'
  using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Udemy\typescript\CourseProject\node_modules\webpack\package.json (relative path: ./hot/emitter)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\emitter doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\emitter.ts doesn't exist
      js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\emitterjs doesn't exist
      as directory
        E:\Udemy\typescript\CourseProject\node_modules\webpack\hot\emitter doesn't exist

webpack 5.62.1 compiled with 8 errors in 2878 ms

非常感谢您的帮助!

EDIT:

我已经运行了 npm install，尝试删除并重建 node_modules 文件夹几次以防万一。

Answer 1

仔细检查我的设置后，我发现了我自己的问题。我写的 extensions: ['.ts', 'js'] 少了一个点，应该是 '.js'... 这就是为什么 webpack 不想检查js文件。谢谢大家，问题已解决。