webpack命令打包时报错TypeError: Cannot read property p

来源:http://www.chinese-glasses.com 作者:Web前端 人气:105 发布时间:2020-04-15
摘要:时间: 2019-10-03阅读: 207标签: 报错 本文实例讲述了webpack4.x开发环境配置方法。分享给大家供大家参考,具体如下: 我只安装了webpack,没有安装webpack-cli,第一次输入webpack打包时,提示

时间: 2019-10-03阅读: 207标签: 报错

本文实例讲述了webpack4.x开发环境配置方法。分享给大家供大家参考,具体如下:

我只安装了webpack,没有安装webpack-cli,第一次输入webpack打包时,提示

写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合。当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装最新版,笔者测试时默认安装的是4.1.1,并不能照搬老教程的方法。为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可参考进行配置。

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages: - webpack-cli (-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后报错

一、全局安装webpack

Error: Cannot find module 'webpack-cli'Require stack:- C:UsersAdministratorAppDataRoamingnpmnode_moduleswebpackbinwebpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15) at Function.Module._load (internal/modules/cjs/loader.js:677:27) at Module.require (internal/modules/cjs/loader.js:830:19) at require (internal/modules/cjs/helpers.js:68:18) at C:UsersAdministratorAppDataRoamingnpmnode_moduleswebpackbinwebpack.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' ]}

如果我们按照旧版本的安装方式,直接使用npm全局安装webpack,我们预期全局安装webpack后,便能在命令行中使用webpack指令。我们在命令行输入:

解决办法:输入命令npm install webpack-cli -g全局安装一下webpack-cli再次运行webpack命令打包,出现新错误

npm install -g webpack
F:mywebalicevuevue-cmsnode_moduleswebpack-clibincli.js:137 const statsPresetToOptions = require("webpack").Stats.presetToOptions; ^TypeError: Cannot read property 'presetToOptions' of undefined at processOptions (F:mywebalicevuevue-cmsnode_moduleswebpack-clibincli.js:137:57) at F:mywebalicevuevue-cmsnode_moduleswebpack-clibincli.js:364:3 at Object.parse (F:mywebalicevuevue-cmsnode_moduleswebpack-clinode_modulesyargsyargs.js:567:18) at F:mywebalicevuevue-cmsnode_moduleswebpack-clibincli.js:49:8 at Object.anonymous (F:mywebalicevuevue-cmsnode_moduleswebpack-clibincli.js:366:3) at Module._compile (internal/modules/cjs/loader.js:936:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10) at Module.load (internal/modules/cjs/loader.js:790:32) at Function.Module._load (internal/modules/cjs/loader.js:703:12) at Module.require (internal/modules/cjs/loader.js:830:19) at require (internal/modules/cjs/helpers.js:68:18) at module.exports (C:UsersAdministratorAppDataRoamingnpmnode_moduleswebpack-clinode_modulesimport-localindex.js:16:66) at C:UsersAdministratorAppDataRoamingnpmnode_moduleswebpack-clibincli.js:15:6 at Object.anonymous (C:UsersAdministratorAppDataRoamingnpmnode_moduleswebpack-clibincli.js:366:3) at Module._compile (internal/modules/cjs/loader.js:936:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10) at Module.load (internal/modules/cjs/loader.js:790:32) at Function.Module._load (internal/modules/cjs/loader.js:703:12) at Module.require (internal/modules/cjs/loader.js:830:19) at require (internal/modules/cjs/helpers.js:68:18) at Object.anonymous (C:UsersAdministratorAppDataRoamingnpmnode_moduleswebpackbinwebpack.js:156:2) at Module._compile (internal/modules/cjs/loader.js:936:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10) at Module.load (internal/modules/cjs/loader.js:790:32) at Function.Module._load (internal/modules/cjs/loader.js:703:12) at Function.Module.runMain (internal/modules/cjs/loader.js:999:10) at internal/main/run_main_module.js:17:11

当执行该操作后,便在C:Users你的用户名AppDataRoamingnpmnode_modules创建了webpack文件夹,里面存储了刚刚全局安装的webpack模块。

解决办法:根据错误提示信息,打开node_moduleswebpack-clibincli.js,第137行,把const statsPresetToOptions = require("webpack").Stats.presetToOptions;中间Stats下标的这个.删掉。保存后再次运行webpack就成功了!

10bet,二、创建项目

我们在合适位置新建一个文件夹webpack-test,用于存放我们的项目。命令行中定位到webpack-test文件夹下,输入以下命令进行项目的初始化:

npm init

这里,要求设置很多选项,可以按项目情况配置也可以不填直接回车。完成后,我们发现文件夹中增加了package.json文件,它用于保存关于项目的信息。

三、尝试打包出现提示

我们在项目根目录新建一个文件hello.js,并在其中输入代码:

function hello;}hello;

然后,我们便可以满怀期待地尝试打包,在命令行输入:

webpack hello.js bundle.js

意思是将hello.js打包成另一个文件bundle.js。但很不幸,4.1.1版本会提示:

The CLI moved into a separate package:webpack-cli.Please install 'webpack-cli' in addition to webpack itself to use the CLI.->when using npm: npm install webpack-cli -D->when using yarn: yarn add webpack-cli -D

CLI已经转移到了一个单独的包webpack-cli中。除了webpack自身外,请额外安装webpack-cli来使用CLI。-> 使用npm安装:npm install webpack-cli -D->使用yarn安装:yarn add webpack-cli -D

意思是,我们需要额外安装webpack-cli,否则便不能在命令行中使用webpack的相关命令。

四、安装webpack-cli

我们在项目中本地安装webpack-cli

npm install webpack-cli -D

这里-D参数和–save-dev的作用相同,只是一种简写而已。笔者这里安装完成后,显示webpack-cli版本是2.0.10。

我们在根目录再次输入:

webpack hello.js bundle.js

The CLI moved into a separate package:webpack-cli.Please install 'webpack-cli' in addition to webpack itself to use the CLI.->when using npm: npm install webpack-cli -D->when using yarn: yarn add webpack-cli -D

这表明我们本地安装webpack-cli后并没有起作用,在命令行中依然不能使用webpack命令。那么是什么地方出了问题呢?我们不难想到,

旧版本的webpack中,webpack指令要能在命令行中使用,需要全局安装webpack,而不是本地安装,因此这里的webpack-cli也应该是同理。

我们卸载本地安装的webpack-cli,全局安装webpack-cli:

npm uninstall webpack-clinpm install -g webpack-cli

本文由10bet发布于Web前端,转载请注明出处:webpack命令打包时报错TypeError: Cannot read property p

关键词:

上一篇:webpack打包时删除console.log,和debugger

下一篇:没有了

最火资讯