webpack学习系列（一），安装webpack与webpack-cli

最新推荐文章于 2025-05-28 15:51:10 发布
最新推荐文章于 2025-05-28 15:51:10 发布
阅读量1.6w 收藏 7
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端学习 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_31847185/article/details/81053906
本文介绍了在遇到webpack -v提示需要安装webpack-cli的问题时，如何解决。在webpack 4版本中，webpack和webpack-cli已分离，需通过npm安装webpack-cli。执行'npm install webpack-cli -g'或使用cnpm完成全局安装，即可解决该问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、问题描述

在安装webpack时，输入webpack -v提示我需要安装webpack-cli，如图：


二、解决

因为在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。

所以用 npm install webpack-cli -g 命令全局安装webpack-cli即可，当然，网络不行的小伙伴可以用cnpm，这里就不多说了。

最低0.47元/天 解锁文章

200万优质内容无限畅学
webpack-dev-server搭建本地服务器（解决webpack-cli、webpack-dev-server版本不兼容报错）08
钢铁直女
05-06 1319
webpack-dev-server搭建本地服务器webpack-dev-server搭建本地服务器，开发阶段使用1、安装webpack-dev-server（开发时依赖）2、在webpack.config.js文件中配置devServer3、运行启动解决webpack-cli、webpack-dev-server版本不兼容报错： webpack-dev-server搭建本地服务器，开发阶段使用 webpack提供的本地开发服务器，基于node.js搭建。内部使用express框架，可以实现浏览器实时更新页
浅谈webpack和webpack-cli模块源码分析
11-21
webpack4与webpack3的区别 webpack4.0 以后，似乎执行方式就发生了改变，不再是 webpack 一波流，而是多了一个 webpack-cli。webpack3中webpack-cli是合在webpack中。所以在命令行运行 webpack 命令的同时，会提示让你再装一个 webpack-cli。 执行脚本到打包结束流程 1、当我们安装了webpack模块后，就会在node_modules/.bin目录下生成一个webpack、webpack.cmd，webpack是linux下的命令脚本，webpack.cmd是windows下命令脚本，webpack.cmd可以在wi
webpack和webpack-cli的安装和卸载
旅途
04-20 793
见链接：点击此处
Vue2之使用Vue-cli创建Webpack工程化项目
最新发布
xrkhy的博客
05-28 1249
使用cli创建Webpack工具进行开发。
安装 webpack webpack-cli
sinat_34849163的博客
07-11 6651
webpack-cli安装 执行–hide-modules命令时，报错了。但是项目确实执行了安装命令，官方安装文档推荐本地安装。 npm i webpack -D npm i webpack-cli -D 但是，可能却安装失败啦。 检测安装是否成功： npx webpack -v 注意，此处使用的是npx(npm包执行器)，如果发现在下载安装的话，请立即停止，表明项目真的没有安装webpack 关于npx参考文档: npx 使用教程 若如图所示 分别打印出webpack和webpack-cli的
1. webpack 和 webpack-cli
m0_71902265的博客
07-24 3396
webpack
webpack坑系列--安装webpack-cli
EminentBoy的博客
06-10 1872
https://segmentfault.com/a/1190000013699050
extract-text-webpack-plugin用法详解
11-28
另一种就是使用extract-text-webpack-plugin插件，将样式文件单独打包，打包输出的文件由配置文件中的output属性指定。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件。 三 插件使用 1
tinyimg-webpack-plugin:一个用于压缩图像的webpack插件
05-10
提前安装webpack和webpack-cli：npm i webpack webpack-cli 必须依赖webpack 4.0.0以上和webpack-cli 3.0.0以上 安装失败 切换NPM镜像为淘宝镜像：npm config set registry https://registry.npm.taobao.org/ 重新...
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
10-14
这个错误通常表明代码中存在ES6语法，例如`const`关键字，而`uglifyjs-webpack-plugin`不支持ES6以上的语法，因为它是一个针对ES5及以下版本的压缩工具。 Vue CLI项目通常会通过`babel`将ES6+代码转换为ES5，以便...
Webpack源码深入-webpack和webpack-cli
m0_73280507的博客
06-19 1527
webpack命令工作原理如下。
Webpack 安装
卡尔特斯
09-28 132
Webpack官网、Node.js官网、npm官网、npm中文官网、npm使用以及命令含义 Webpack 需要基于 Node.js、npm 如果是使用 Vue 进行开发，vue 自带的脚手架里面就包含了 Webpack，可以直接项目内使用。当然也可以自己在安装一个自己玩使用，毕竟那个是在脚手架里面的，外部还是可以在安装一个自己玩的。 MAC电脑 Node.js 、npm 推荐使用 Homeb...
安装webpack，webpack-cli，webpack-dev-server（版本一定要兼容！）
热门推荐
AshleyXM的博客
03-26 1万+
ps：仅记录个人经验，如有错误欢迎指出与讨论，谢谢！ 最近学习vue要安装webpack，webpack-cli，webpack-dev-server，由于它们的版本经常会更新导致不兼容，今天安装了一上午，一直各种报错，最后找到了一个可行方案： webpack 4.41.5 webpack-cli 3.3.10 webpack-dev-server 3.10.1 以上这三个版本搭配是可行的！ （一）卸载不兼容版本 如果之前安装了其他不兼容版本可以先卸载掉！ npm uninstall webpack -g
webpack安装
weixin_41042671的博客
03-17 247
1､打开atom工程新方式在终端可以mkdiv week10后atom .直接打开atom2､生成git初始化git init会生成.git需要创建个文件或文件夹和文件后才可使用分支.git checkout -b demo后git branch看不到分支。创建文件后  git add.git commit -am "init"后git branch可看到分支。3､npm init -y生成nod...
webpack和webpack-cli的关系
我的博客简介
08-02 3961
该文件最重要的函数就是runCli，该函数可以执行webpack-cli包中bin目录下的cli.js文件，也就是说在此之前的步骤只是为了找到cli.js文件，在此之后，webpack-cli才发挥作用。在第三方框架中，React和Vue(未使用Vite的版本)也没有使用webpack-cli.同时，webpack.js文件也做了一些辅助判断，首先查看你是否安装了webpack-cli，如果没有安装，就会询问你是否安装（或手动安装）该包，如果选择不安装，那么程序运行到这就停止了。...
webpack（一） 安装和配置
Yushia的博客
04-04 3246
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
webpack和webpack-cli安装和卸载
weixin_59739381的博客
06-19 3905
4、查看webpack 信息 npm info webpack 4.0以后 直接输入该命令： webpack -v。1.删除全局webpack-cli ：npm uninstall -g webpack-cli。2.删除本地webpack-cli ：npm uninstall webpack-cli。3.删除全局webpack ：npm uninstall -g webpack。全局安装webpack，这样就能在全局使用webpack的命令。4.删除本地webpack ：npm un webpack。
webpack，cli安装步骤
qq_43511568的博客
05-06 3810
webpack webpack-dev-server resolve 文件扩展名可以省略 es6 -> es5 ( 优雅降级 ) 什么叫做优雅降级， 什么叫做渐进增强？ 优雅降级指的是， 先进行高版本开发， 然后向下兼容 渐进增强指的是， 先进行低版本稳定开发， 然后在进行高版本技术的引用 css代码抽离（将src目录css文件打包到dist目录中， 并且会自动在index.htm...
webpack-cli
我的博客简介
03-01 1251
是 Webpack 提供的命令行工具，用于在命令行中执行 Webpack 相关的操作。主要完成以下几项工作：负责解析用户在命令行中输入的参数，包括配置文件路径、打包模式、插件等信息。通过解析这些参数，确定如何执行 Webpack 相关的操作。负责读取并解析指定的 Webpack 配置文件（通常是通过读取配置文件，知道如何进行模块打包、资源处理等操作。调用 Webpack API：通过调用 Webpack 提供的 API，将用户输入的参数和配置转化为具体的 Webpack 打包操作。
Ember应用集成Webpack：使用ember-cli-webpack-imports插件
资源摘要信息:"ember-cli-webpack-imports：一个将Webpack依赖项添加到Ember应用程序的插件" 在现代前端开发中，Ember.js 是一个流行的开源 JavaScript Web 框架，它提供了一整套工具和库，用于构建单页应用程序。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值