webpack的一些坑

Posted 小短腿奔跑吧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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_modulesfsevents):
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:UsersAdministratorAppDataRoaming
pm
ode_moduleswebpackinwebpack.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:UsersAdministratorAppDataRoaming
pm
ode_moduleswebpackinwebpack.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:webDemowebpack-demo ode_moduleswebpack-cliincli.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:webDemowebpack-demo
ode_moduleswebpack-cliincli.js:137:57)
    at D:webDemowebpack-demo
ode_moduleswebpack-cliincli.js:364:3
    at Object.parse (D:webDemowebpack-demo
ode_modulesyargsyargs.js:567:18)
    at D:webDemowebpack-demo
ode_moduleswebpack-cliincli.js:49:8
    at Object.<anonymous> (D:webDemowebpack-demo
ode_moduleswebpack-cliincli.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:UsersAdministratorAppDataRoaming
pm
ode_moduleswebpack-cli
ode_modulesimport-localindex.js:16:66)
    at C:UsersAdministratorAppDataRoaming
pm
ode_moduleswebpack-cliincli.js:15:6
    at Object.<anonymous> (C:UsersAdministratorAppDataRoaming
pm
ode_moduleswebpack-cliincli.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:UsersAdministratorAppDataRoaming
pm
ode_moduleswebpackinwebpack.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:UsersAdministratorAppDataRoaming
pm
ode_moduleswebpackinwebpack.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: []
}

  

以上是关于webpack的一些坑的主要内容,如果未能解决你的问题,请参考以下文章

webpack我遇到的一些坑

webpack+vue2.0遇到的一些坑

webpack踩坑之旅

webpack 4 入坑及爬坑记录

webpack

webpack踩坑记录