记一次本地webpack打包失败的解决过程

学算法，结果相对于过程不那么重要

于 2025-01-26 16:35:40 发布

阅读量297

点赞数 10

文章标签： webpack 前端 node.js npm

本文链接：https://blog.youkuaiyun.com/qq_24292711/article/details/145369480

版权

背景

初学webpack。在使用npm安装webpack时，按照书中的要求，在项目的本地安装webpack，因为书中的说法是不同的项目需要的webpack版本不一样，需要根据项目需要，在项目的根目录下安装对应的webpack
安装命令

npm install webpack@3.6.0 webpack-cli -D

DOS显示安装结果，但是中间有一些告警

C:\opt\codes\vue\practise_c2\newprogram1>npm install webpack-cli -D
npm WARN saveError ENOENT: no such file or directory, open 'C:\opt\codes\vue\practise_c2\newprogram1\package.json'
npm WARN notsup Unsupported engine for webpack-cli@6.0.1: wanted: {"node":">=18.12.0"} (current: {"node":"12.14.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: webpack-cli@6.0.1
npm WARN notsup Unsupported engine for @discoveryjs/json-ext@0.6.3: wanted: {"node":">=14.17.0"} (current: {"node":"12.14.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: @discoveryjs/json-ext@0.6.3
npm WARN notsup Unsupported engine for @webpack-cli/configtest@3.0.1: wanted: {"node":">=18.12.0"} (current: {"node":"12.14.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: @webpack-cli/configtest@3.0.1
npm WARN notsup Unsupported engine for @webpack-cli/info@3.0.1: wanted: {"node":">=18.12.0"} (current: {"node":"12.14.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: @webpack-cli/info@3.0.1
npm WARN notsup Unsupported engine for @webpack-cli/serve@3.0.1: wanted: {"node":">=18.12.0"} (current: {"node":"12.14.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: @webpack-cli/serve@3.0.1
npm WARN notsup Unsupported engine for commander@12.1.0: wanted: {"node":">=18"} (current: {"node":"12.14.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: commander@12.1.0
npm WARN notsup Unsupported engine for webpack-merge@6.0.1: wanted: {"node":">=18.0.0"} (current: {"node":"12.14.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: webpack-merge@6.0.1
npm WARN enoent ENOENT: no such file or directory, open 'C:\opt\codes\vue\practise_c2\newprogram1\package.json'
npm WARN webpack-cli@6.0.1 requires a peer of webpack@^5.82.0 but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/configtest@3.0.1 requires a peer of webpack@^5.82.0 but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@3.0.1 requires a peer of webpack@^5.82.0 but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@3.0.1 requires a peer of webpack@^5.82.0 but none is installed. You must install peer dependencies yourself.
npm WARN newprogram1 No description
npm WARN newprogram1 No repository field.
npm WARN newprogram1 No README data
npm WARN newprogram1 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@6.0.1
added 33 packages from 24 contributors in 2.696s

28 packages are looking for funding
  run `npm fund` for details

遇到的问题

在配置好项目的webpack.config.js后，在项目根目录下运行webpack命令，遇到了这样的报错:

C:\opt\codes\vue\practise_c2\newprogram1>webpack
'webpack' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

解决问题的思路：

分析：在dos系统下运行webpack，说明要么当前目录有webpack这个命令的可执行文件，要么就是加入了系统的环境变量，可以自动识别，但是我安装的是项目下的webpack，也没有加入到系统的环境变量。
解决思路：方式一：将webpack加入到系统环境变量中，但是这样就没有根据项目而安装webpack的效果了
解决思路：方式二：通过视频“webpack的安装与使用”link学习了用npm运行命令的方法：
```
 1.  配置好`package.json`
```

{
  "scripts":{
    "test":"echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  }
}

		2. 运行`npm run dev`

C:\opt\codes\vue\practise_c2\newprogram1>npm run dev

> @ dev C:\opt\codes\vue\practise_c2\newprogram1
> webpack

Hash: f2549a15ac365010d127
Version: webpack 3.6.0
Time: 34ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.97 kB       0  [emitted]  main
   [0] ./app/app.js 31 bytes {0} [built]
   [1] ./app/bar.js 71 bytes {0} [built]

打包成功！