欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack 和 webpack-cli 安装和使用中出现的问题

程序员文章站 2022-07-02 15:22:32
因为国内防火墙的原因,建议首先安装 cnpm: 使用 npm install cnpm -g 或者 npm install -g cnpm --registry=https://registry.npm.taobao.org 【注】G:\MyWeb\...处为自定义的文件夹地址 安装 webpack ......

因为国内防火墙的原因,建议首先安装 cnpm:

  使用 npm install cnpm -g 或者 npm install -g cnpm --registry=https://registry.npm.taobao.org
webpack 和 webpack-cli 安装和使用中出现的问题

  【注】g:\myweb\...处为自定义的文件夹地址

 

安装 webpack 和 webpack-cli:

  可以用 cnpm install webpack -dcnpm install webpack-cli -d 分别安装,也可以用 cnpm install webpack webpack-cli -d 一起安装,因为之前就出了问题,为了找问题我采用的分别安装

webpack 和 webpack-cli 安装和使用中出现的问题

 

【注】下图中 cnpm i 是 cnpm install 的缩写

webpack 和 webpack-cli 安装和使用中出现的问题

 

但是安装后还是有问题(此处 if ( 已经打包成功 ) return )

webpack 和 webpack-cli 安装和使用中出现的问题

 

尝试在初始化时生成的 package.json 文件中添加 dev:webpack 后运行也是出错

webpack 和 webpack-cli 安装和使用中出现的问题

webpack 和 webpack-cli 安装和使用中出现的问题

找到提示的这个日志文件,把文件夹中的日志删除,然后重新下载依赖:

使用 cnpm install webpack -g cnpm install webpack-cli -g 命令直接下载(为了试错我是分别安装的,另外使用 npm 会报错)

webpack 和 webpack-cli 安装和使用中出现的问题

 

 使用 cnpm install webpack -g 命令下载

webpack 和 webpack-cli 安装和使用中出现的问题

 

再使用 cnpm i webpack -d 安装,别忘了还有 webpack-cli 也要执行一遍下载和安装,是否可以使用 cnpm i webpack webpack-cli -g 和 cnpm i webpack webpack-cli -d 直接一次下载安装我没试过,折腾太久不想试了,试过的朋友可以留个言

webpack 和 webpack-cli 安装和使用中出现的问题

 

最后设置好 webpack.config.js 配置文件,再次运行 webpack 打包成功

webpack 和 webpack-cli 安装和使用中出现的问题