webpack的一些坑

最近自己着手做一個小的Demo需要webpack，目前版本號是4.41.2，想使用的版本是3.6.0，因3x版本和4x版本很多地方不同，所以在安裝過程中也是很多坎坷，下面是遇到的一些坑，和一些解決辦法

 

1.操作步驟：首先全局安裝npm install -g webpack，再webpack -v查看版本號報錯

解釋報錯信息：報錯信息的意思是需要我安裝 webpack-cli，問我是否需要安裝，我選擇yes，但提示並沒有發現 模板webpack-cli

解決辦法：全局安裝 npm install -g webpack-cli

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm WARN webpack-demo@1.0.0 No description
npm WARN webpack-demo@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@3.3.10
updated 1 package and audited 5285 packages in 13.683s

found 0 vulnerabilities

Error: Cannot find module 'webpack-cli'
Require stack:
- C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:143:5
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\webpack\\bin\\webpack.js'
  ]
}

 

2.操作步驟：本地安裝npm install webpack@3.6.0 --save-dev

 報錯原因：因全局安裝webpack版本4.41.2，全局版本與本地版本不一致，導致運行錯誤

 報錯提示：webpack中 presetToOptions 報錯

 解決辦法：

• 根據路徑D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js找到報錯信息處，將

  const statsPresetToOptions = require("webpack").Stats.presetToOptions; 進行刪除    //不推薦此方法，盡量我們不要去改源碼

• 可將webpack-cli刪除，因webpack3x版本不依賴與webpack-cli，可手動配置信息，webpack4x很多內部已經配置完成，依賴的是webpack-cli   //該方法還需進一步測試，不確定是否是該問題
• 可將全局安裝的webpack版本4.41.2刪除，再次全局安裝3.6.0版本即可  // 因項目不同，webpack的版本也會不同，全局安裝webpack不是好的推薦方法，大家在做一些Demo中可使用，不推薦項目中使用
• 前端框架安裝vue，react，angular時都會自動安裝webpack，比如vuecli2使用的事webpack3x，vuecli3使用的是webpack4，大家可以根據自己選擇的框架進行選擇webpack版本   // 推薦

const statsPresetToOptions = require("webpack").Stats.presetToOptions;
                                                                             ^

TypeError: Cannot read property 'presetToOptions' of undefined
    at processOptions (D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:137:57)
    at D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:364:3
    at Object.parse (D:\web\Demo\webpack-demo\node_modules\yargs\yargs.js:567:18)
    at D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (D:\web\Demo\webpack-demo\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at module.exports (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\import-local\index.js:16:66)
    at C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:15:6
    at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

　　

 3.操作步驟：npm uninstall -g webpack 卸載全局webpack

解決辦法：全局安裝npm install -g webpack 

問題總結：webpack不推薦全局安裝，可在項目中本地安裝

 

internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js'
?[90m    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)?[39m
?[90m    at Function.Module._load (internal/modules/cjs/loader.js:687:27)?[39m
?[90m    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)?[39m
?[90m    at internal/main/run_main_module.js:17:11?[39m {
  code: ?[32m'MODULE_NOT_FOUND'?[39m,
  requireStack: []
}

　　

4.：操作步驟：安裝了webpack3x，想實現熱更新需要安裝 npm install webpack-dev-server --save-dev后，npm run dev運行

報錯提示：未找到webpack模塊

解決辦法：webpack-dev-server降低版本或webpack升級版本

　　　　　1. 刪除webpack低版本，安裝最新版本webpack

　　　　　2. 刪除webpack-dev-server最新版本，降低webpack版本   npm install webpack-dev-server@webpack-3 --save-dev

問題總結：因webpack-dev-server未指定版本，所以安裝的是最新版本，因webpack版本是3.x，所以導致webpack版本與webpack-dev-server版本並不匹配，

 

Error: Cannot find module 'webpack'