如何修复 web-dev-server 执行错误？

Question

我太难了。我需要一些帮助。

我的环境：WSL2

我执行 webpack-dev-server

npm run dev

这是它的日志：

> lecture@1.0.0 dev /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture
> webpack-dev-server --hot

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /dist/
ℹ ｢wds｣: Content not from webpack is served from /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture
@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "85",
  "ie": "11",
  "samsung": "12"
}

Using modules transform: auto

Using plugins:
  proposal-numeric-separator { "ie":"11" }
  proposal-logical-assignment-operators { "ie":"11", "samsung":"12" }
  proposal-nullish-coalescing-operator { "ie":"11", "samsung":"12" }
  proposal-optional-chaining { "ie":"11", "samsung":"12" }
  proposal-json-strings { "ie":"11" }
  proposal-optional-catch-binding { "ie":"11" }
  transform-parameters { "ie":"11" }
  proposal-async-generator-functions { "ie":"11" }
  proposal-object-rest-spread { "ie":"11" }
  transform-dotall-regex { "ie":"11" }
  proposal-unicode-property-regex { "ie":"11" }
  transform-named-capturing-groups-regex { "ie":"11" }
  transform-async-to-generator { "ie":"11" }
  transform-exponentiation-operator { "ie":"11" }
  transform-template-literals { "ie":"11" }
  transform-literals { "ie":"11" }
  transform-function-name { "ie":"11" }
  transform-arrow-functions { "ie":"11" }
  transform-classes { "ie":"11" }
  transform-object-super { "ie":"11" }
  transform-shorthand-properties { "ie":"11" }
  transform-duplicate-keys { "ie":"11" }
  transform-computed-properties { "ie":"11" }
  transform-for-of { "ie":"11" }
  transform-sticky-regex { "ie":"11" }
  transform-unicode-escapes { "ie":"11" }
  transform-unicode-regex { "ie":"11" }
  transform-spread { "ie":"11" }
  transform-destructuring { "ie":"11" }
  transform-block-scoping { "ie":"11" }
  transform-typeof-symbol { "ie":"11" }
  transform-new-target { "ie":"11" }
  transform-regenerator { "ie":"11" }
  proposal-export-namespace-from { "ie":"11" }
  syntax-dynamic-import { "chrome":"85", "ie":"11", "samsung":"12" }
  syntax-top-level-await { "chrome":"85", "ie":"11", "samsung":"12" }

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.
[BABEL] Note: The code generator has deoptimised the styling of /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.
ℹ ｢wdm｣: asset app.js 1.31 MiB [emitted] (name: app)
runtime modules 460 bytes 4 modules
modules by path ./node_modules/ 1.23 MiB
  modules by path ./node_modules/webpack-dev-server/client/ 36.1 KiB 10 modules
  modules by path ./node_modules/webpack/hot/ 6.04 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 60.5 KiB 4 modules
  modules by path ./node_modules/scheduler/ 36.7 KiB 4 modules
  modules by path ./node_modules/react-hot-loader/ 4.44 KiB 3 modules
  modules by path ./node_modules/url/ 42.6 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 6.65 KiB 3 modules
  modules by path ./node_modules/react/ 79.6 KiB 2 modules
  modules by path ./node_modules/react-dom/ 737 KiB 2 modules
modules by path ./*.jsx 7.23 KiB
  ./client.jsx 1.05 KiB [built] [code generated]
  ./WordRelay.jsx 6.18 KiB [built] [code generated]
webpack 5.1.3 compiled successfully in 22601 ms
ℹ ｢wdm｣: Compiled successfully.
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/DumpStack.log.tmp'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/hiberfil.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/pagefile.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/swapfile.sys'

所以我尝试使用sudo更改权限文件， 但我的权限被拒绝了。

我确认通过ls -al 获得许可，但是 此文件的权限显示为-????????。

你能给我建议吗？

Answer 1

Windows 可能不喜欢您在C:/ 中存储/尝试写入文件的事实。由于 WSL 并不总是与 Window 的权限系统正确绑定，因此即使使用 sudo WSL 也可能无法更改这些文件的权限。

我建议将目录更改为您知道您的用户拥有所有权的位置（例如您的文档库或 C:/users/yourusername），然后重试。

Answer 2

我遇到过类似的问题，对我有用的解决方案是在 HOME 的 WSL 子目录中克隆（或创建）我的存储库，类似于 ~/workspace/React Study，而不是挂载的 C:\。

此解决方案甚至使用 VS Code 集成大大提高了性能，尤其是在您编辑和保存文件时。