通過 webpack 框架執行 electron 程式是報如下錯誤：

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.optimization has an unknown property 'namedModules'. These properties are valid:
   object { checkWasmTypes?, chunkIds?, concatenateModules?, emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?, mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?, moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?, providedExports?, realContentHash?, removeAvailableModules?, removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?, usedExports? }
   -> Enables/Disables integrated optimizations.
   Did you mean optimization.moduleIds: "named" (BREAKING CHANGE since webpack 5)?
    at validate (D:\Code\Web\StudyOrTest\electronStudy\node_modules\schema-utils\dist\validate.js:104:11)
    at validateSchema (D:\Code\Web\StudyOrTest\electronStudy\node_modules\webpack\lib\validateSchema.js:73:2)
    at create (D:\Code\Web\StudyOrTest\electronStudy\node_modules\webpack\lib\webpack.js:102:3)
    at webpack (D:\Code\Web\StudyOrTest\electronStudy\node_modules\webpack\lib\webpack.js:139:31)
    at f (D:\Code\Web\StudyOrTest\electronStudy\node_modules\webpack\lib\index.js:35:15)
    at D:\Code\Web\StudyOrTest\electronStudy\node_modules\electron-webpack\src\dev\dev-runner.ts:90:34
    at new Promise (<anonymous>)
    at DevRunner.startMainCompilation (D:\Code\Web\StudyOrTest\electronStudy\node_modules\electron-webpack\src\dev\dev-runner.ts:89:11)     
    at async Promise.all (index 2)
    at DevRunner.start (D:\Code\Web\StudyOrTest\electronStudy\node_modules\electron-webpack\src\dev\dev-runner.ts:47:5)
    at main (D:\Code\Web\StudyOrTest\electronStudy\node_modules\electron-webpack\src\dev\dev-runner.ts:147:3)

...中間省略了一些無關資訊

┏ Renderer -------------------

  × ｢wds｣: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.      
   - configuration.optimization has an unknown property 'namedModules'. These properties are valid:
     object { checkWasmTypes?, chunkIds?, concatenateModules?, emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?, mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?, moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?, providedExports?, realContentHash?, removeAvailableModules?, removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?, usedExports? }
     -> Enables/Disables integrated optimizations.
     Did you mean optimization.moduleIds: "named" (BREAKING CHANGE since webpack 5)?

┗ ----------------------------
 

• 錯誤原因

看錯誤提示 Did you mean optimization.moduleIds: "named" (BREAKING CHANGE since webpack 5)? 好像是因為 webpack5 引起的，由於自己也時初學，具體原因尚不清楚。

• 解決方案

自己看了一下自己安裝的 webpack 版本是 5.4.0 ，所以嘗試了一下重新安裝 4.5.0 版本，發現能夠正常執行。安裝命令如下：

yarn add [email protected] --dev