影响WebPack部署的常见因素及解决办法

目录

影响WebPack部署的常见因素及解决办法

1、安装及使用

2、影响因素

2.1、lockfileVersion

2.2、UAC及杀毒软件或Editor代码编辑器占用

2.3、Browserslist浏览器列表更新

2.4、版本太高，降级使用，或解决“包”版本兼容性问题

2.5、两个命令互斥

2.6、高版本npm的全局与本地参数格式

2.7、安装或配置路径不安全问题

2.8、磁盘空间不足

2.9、npm i其它一些基础问题

2.10、网页不加载内容，而是显示文件及路径列表

2.11、npm指令的详细日志文件的输出位置

1、安装及使用


https://www.npmjs.com/package/webpack
npm install --save-dev webpack


2、影响因素


2.1、lockfileVersion

webpack安装时会首先找“项目”由npm init初始化的package.json及其package-lock.json
其中package-lock.json中有个版本 "lockfileVersion": 1,版本最好与package.json一致，否则请修改。


npm i
npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

另外，package.json里面dependencies和devDependencies依赖包的版本号前面的符号有两种，一种是~，一种是^ ：

  • ~的意思是匹配最近的小版本，比如~1.0.2将会匹配所有的1.0.x版本，但不匹配1.1.0；
  • ^的意思是匹配最近的一个大版本，比如1.0.2 将会匹配所有 1.x.x，但不包括2.x.x。

若安装npm i -D时提示版本问题，比如：

npm WARN notsup Unsupported engine for autoprefixer@10.4.8: wanted: {"node":"^10 || ^12 || >=14"} (current: {"node":"13.14.0","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: autoprefixer@10.4.8

请降级安装，详见本文“2.4节”所述方法。

2.2、UAC及杀毒软件或Editor代码编辑器占用

解决：

        1、关闭已经打开的vscode代码或直接关闭已打开的文件夹、将工程目录加入杀软“白名单”且如有需要临时关闭杀软、UAC必须要有“管理员”读写权限；

        2、同时请参照一并做好：“2.7、安装或配置路径不安全问题”


npm ERR! code EPERM
npm ERR! syscall unlink
npm ERR! path L:\Vue3Test\MyVue3Proj1\frontend-training-master\\MiniApp-proj\node_modules\.staging\@webassemblyjs\wasm-opt-7c2d48dd
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, unlink 'L:\Vue3Test\MyVue3Proj1\frontend-training-master\\MiniApp-proj\node_modules\.staging\@webassemblyjs\wasm-opt-7c2d48dd'
npm ERR!  [OperationalError: EPERM: operation not permitted, unlink 'L:\Vue3Test\MyVue3Proj1\frontend-training-master\\MiniApp-proj\node_modules\.staging\@webassemblyjs\wasm-opt-7c2d48dd'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, unlink 'L:\Vue3Test\MyVue3Proj1\frontend-training-master\\MiniApp-proj\node_modules\.staging\@webassemblyjs\wasm-opt-7c2d48dd'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'unlink',
npm ERR!     path: 'L:\Vue3Test\MyVue3Proj1\frontend-training-master\\MiniApp-proj\\node_modules\\.staging\\@webassemblyjs\\wasm-opt-7c2d48dd'
npm ERR!   },
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'unlink',
npm ERR!   path: 'L:\Vue3Test\MyVue3Proj1\frontend-training-master\\MiniApp-proj\\node_modules\\.staging\\@webassemblyjs\\wasm-opt-7c2d48dd',
npm ERR!   parent: 'webpack-proj'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2022-08-21T00_43_08_278Z-debug.log

2.3、Browserslist浏览器列表更新

#  这主要跟：.browserslistrc配置文件有关：
> 1%
last 13 versions
not dead
#  方案1： 降低之前的版本级别，比如只留最近的5个版本：last 5 versions
# 或者按照下述方法，定期更新浏览器版本列表：
npx browserslist@latest --update-db

npm run build

> movie-list@1.0.0 build L:\Vue3Test\MyVue3Proj1\frontend-training-master\\MiniApp-proj
> webpack --mode=production

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
------------------------------
npx browserslist@latest --update-db
npx: 7 安装成功，用时 4.871 秒
Latest version:     1.0.30001380
Installed version:  1.0.30001223
Removing old caniuse-lite from lock file
Installing new caniuse-lite version
$ npm install caniuse-lite
npm WARN movie-list@1.0.0 No description
npm WARN movie-list@1.0.0 No repository field.

Cleaning package.json dependencies from caniuse-lite
$ npm uninstall caniuse-lite
npm WARN movie-list@1.0.0 No description
npm WARN movie-list@1.0.0 No repository field.

caniuse-lite has been successfully updated

No target browser changes

2.4、版本太高，降级使用，或解决“包”版本兼容性问题

#查某“包”的所有发行版本：

npm view 包名 versions

#安装某“包”的某个发行版本：

npm install 包名@包的安装发行版

比如：
npm install shebang-regex
npm WARN notsup Unsupported engine for shebang-regex@4.0.0: wanted: {"node":"^12.20.0 || ^14.13.1 || >=16.0.0"} (current: {"node":"13.14.0","npm":"6.14.4"})

npm WARN notsup Not compatible with your version of node/npm: shebang-regex@4.0.0

解决：
npm view shebang-regex versions
[ '1.0.0', '2.0.0', '3.0.0', '4.0.0' ]
PS L:\webpack-proj> npm install shebang-regex@3.0.0
npm WARN movie-list@1.0.0 No description
npm WARN movie-list@1.0.0 No repository field.

+ shebang-regex@3.0.0
updated 1 package and audited 882 packages in 7.892s

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

2.5、两个命令互斥


 

    "serve": "webpack serve",
     #执行后按照webpack.config.js中的端口启动本地服务，且删除本机分发目录dist下的内容:
         devServer: {  port: 8080, },
    "build": "webpack --mode=production"
     #执行后按照webpack.config.js中的路径配置输出分发目录dist下的内容:
         output: {  path: path.resolve(__dirname, './dist'), }

2.6、高版本npm的全局与本地参数格式

若提示：
 

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

解决：
(1)、安装包：32位、64位操作系统有区别；
(2)、安装后的CLI脚本命令文件的配置：
prefix -g新版本已弃用，需改为prefix --location=global
node安装文件夹根目录.\nodejs下：
(2.1)、改文件，npm 23行：
##来超 NPM_PREFIX=`"$NODE_EXE" "$NPM_CLI_JS" prefix -g`
NPM_PREFIX=`"$NODE_EXE" "$NPM_CLI_JS" prefix --location=global`
(2.2)、改文件，npm.cmd 12行：
rem FOR /F "delims=" %%F IN ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" prefix -g') DO (
FOR /F "delims=" %%F IN ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" prefix --location=global') DO (

2.7、安装或配置路径不安全问题

错误提示一般类似：

21924 verbose stack Error: EINVAL: invalid argument, read
21924 verbose stack     at L:\Program Files\nodejs\node_modules\npm\node_modules\gentle-fs\lib\rm.js:245:7
21924 verbose stack     at L:\Program Files\nodejs\node_modules\npm\node_modules\gentle-fs\node_modules\iferr\index.js:13:50
21924 verbose stack     at callback (L:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:295:20)
21924 verbose stack     at FSReqCallback.oncomplete (fs.js:172:5)
21925 verbose cwd L:\Vue3Test\MyVue3Proj1\网络\frontend-interview-network-master\25. WebSocket实战\client
21926 verbose Windows_NT 6.1.7601
21927 verbose argv详细的格式及其所需参数： "L:\\Program Files\\nodejs\\node.exe" "L:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "i"

提类类似不安全路径：safe.directory L:/Vue3Test/node_modules
请将其提示脚本复制后，已运行后，再往下执行其它脚本：
git config --global --add safe.directory L:/Vue3Test/avue-app3

MSWindows下，路径的规范写法：

# cmd终端：
# 由于可能出现空格，所以用当英双引号""做包裹
# 由于可能路径中包含特殊路径，比如L:\Program Files (x86)，所以用双斜杠符号\\
git config --global --add safe.directory "L:\\Vue3Test\\MyVue3Proj1\\client"

# PowerShell终端：
# 由于可能出现空格，所以用当英双引号""做包裹
# 由于可能路径中包含特殊路径，比如L:\Program Files (x86)，所以用双反斜杠符号//
git config --global --add safe.directory "L://Vue3Test//MyVue3Proj1//client"

2.8、磁盘空间不足

npm WARN tar ENOSPC: no space left on device, write

2.9、npm i其它一些基础问题


npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the
actual version of core-js.
npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm警告已弃用core-js@2.6.12：core js@<3.4已不再维护，由于存在大量问题，不建议使用。由于V8引擎的突发奇想，旧的core js版本中的功能检测可能会导致高达100倍的减速，即使没有多填充。请将您的依赖项升级到
核心js的实际版本。
npm警告已弃用html-webpack-plugin@3.2.0：3.x不再受支持
npm警告已弃用querystring@0.2.0：querystring API被认为是遗留的。新代码应改用URLSearchParams API。
npm警告已弃用svgo@1.3.2：不再支持此SVGO版本。升级到v2.x.x。

2.10、网页不加载内容，而是显示文件及路径列表

解决：

 同时应注意： 

        “生产环境”和“开发环境”的区别：

        “生产环境”打包 输出 的“目标路径” /dist ；

        npm run serve 是“开发环境”，对应 服务器 === devServer { }     

2.11、npm指令的详细日志文件的输出位置


C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\

# webpack # npm # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

openEuler系统通过shell脚本安装openGauss 5.0.0企业版

avatar 华为云开发者联盟
cover

一文了解npm install -g和npm install --save-dev的关系

avatar 华为云开发者联盟
cover

【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（2）

avatar 华为云开发者联盟