關於webpack配置webpack-dev-server 報錯問題。Error: Cannot find module 'webpack-cli/bin/config-yargs'
配置情況
自動編譯並執行,每次修改程式碼都需要重新執行 webpack 命令,可以使用 webpack-dev-server 自動打包執行
安裝 loader; npm install webpack-dev-server --save-dev
webpack配置檔案;
1. 新增 devServer 服務後需要調整輸出的路徑
publicPath: '/'
2. 增加 devServer 配置
devServer: {
open: true, // 自動開啟瀏覽器
compress: true, // 啟動gzip壓縮
port: 3000, // 埠號
quiet:true
},
3. npm需要配置package.json檔案中scripts啟動選項配置
"dev": "webpack-dev-server " 直接將打包檔案在記憶體中儲存,不會生成dist檔案
執行:npm run dev
出錯現象
Error: Cannot find module 'webpack-cli/bin/config-yargs'
這個報錯是我在安裝webpack-dev-server
之後命令列使用的時候出現的,
按理這裡應該出現我打包完成並且啟動服務的,但是卻有了報錯。
出錯原因
查閱了其他人的解決,發現是因為webpack-cli
的新版本對webpack-dev-server
之前的版本是
- node -v —— v12.19.0
- npm -v —— v6.14.8
- webpack -v —— "^5.1.3"
- webpack-cli -v —— "^4.1.0"
- webpack-dev-server -v —— "^3.11.0"
解決方案
之後降低webpack-cli
的版本為 "^3.3.12"
npm i [email protected] -D 就ok了