如何修复 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

我遇到过类似的问题，对我有用的解决方案是从 HOME 在 WSL sub-directory 中克隆（或创建）我的存储库，而不是 ~/workspace/React Study已安装 C:\.

此解决方案甚至使用 VS 代码集成提高了很多性能，特别是在您编辑和保存文件时。

Answer 2

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

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

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

How can I fix the web-dev-server execution error?

reactjs

npm

webpack

webpack-dev-server

windows-subsystem-for-linux