关于webpack webpack-cli全局安装后找不到webpack命令的解决方案

关于webpack webpack-cli全局安装后找不到webpack命令的解决方案,第1张

在gitbash或者windows自带的cmd终端全局安洞袭装webpack cnpm i webpack webpack-cli -g 后通过 webpack -v 查看webpack版本时找不到webpack命令

全局安装的webpack路径添加到环境变量

1.增加环境变量 NODE_PATH ,穗李值为webpack的安装目录,如 D:\nvm\v14.16.1\node_modules\gulp\bin\gulp.js

2.环境变量 Path 增猜颤迟加一条数据,值为webpack的安装目录,如 D:\nvm\v14.16.1\node_modules\gulp\bin\gulp.js

3.执行 webpack -v 即可看到版本情况

webpack 的默认配置文件是 webpack.config.js ,所以在我们的项目根目录下(02webpack-demo)新建一个webpack.config.js的文件,里吵羡面啥都不写,核碰渗这个时候我们在终端中运行 npx webpack ,就会在根目录下生成一个 dist 文件夹,里面有一个 main.js ,这是 webpack 利用默认的配置项为我们打包生成的文件,接下来我们来简单配置一下这个文件里面的内容:

配置好文件后,再次运行 npx webpack ,这个时候在我们的项目目录下就生成了一个 bundle 文件夹,里面有一个 bundle.js 就是 webpack 帮我们翻译好的文件了,在我们的 demo.html 中引入 bundle.js ,在浏览器中打开 demo.html 文件,可以看到我们打印的内容已经正确的出现在了浏览器控制台中了。

我们已经知道了 webpack 的默认配置文件的名字是 webpack.config.js ,那么有没有办法修改这个名字呢?比如我想把这个名字改为 test.config.js 或者其他什么名字,答案是有的,比如我改成了 test.js ,那么在利用 webpack 进行打包的时候就应该改脊运行 npx webpack --config test.js ,打包结果和上面的还是一样的.

在上面的打包过程中,每次打包的时候都要执行 npx webpack 或者 npx webpack --config test.js ,你可能会觉得有点繁琐,我们可以在 package.json 中的 scripts 中配置一个脚本,如下所示:

配置好脚本之后,在终端中执行 npm run bundle 这个命令, webpack 就会重新帮我们打包文件,这里涉及到的知识点是 npm scripts ,它的原理是当我们在终端中执行 npm run bundle 的时候,实际上在运行的就是 package.json 配置中的 bundle 这个命令,而 bundle 这个命令的底层就是在帮我们执行 webpack 这个命令,这里有一个点需要注意,如果我们在 scripts 中以命令的形式去执行 webpack 的时候,首先会在工程目录下的 node-modules 下去找是否安装了 webpack ,如果安装了的话就会直接使用 node-modules 中的 webpack ,但是如果 node-modules 下面没有 webpack ,就会去全局寻找 webpack

1.全局安装的 webpack ,打包的之后在终端中运行 webpack index.js

2.局部安装的 webpack ,打包的之后在终端中运行 npx webpack index.js

3.通过配置 npm scripts 脚本,打包的之后在终端中运行 npm run 你配置的脚本的内容 ,比如我配置的脚本为:

那么在打包的时候运行 npm run test 即可

在全局下安装:悔咐胡npm  install  webpack  -g    

安装指定版本:npm 碧拦 install  webpack@版简信本号   -g 

卸载:npm  uninstall  webpack  -g

查看版本号:webpack -v

4.0以上webpack还要安装webpack-cli

npm install webpack-cli -g


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12540313.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存