webpack5 安装中的问题及方案（一）

基本概念

Webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

为什么要使用webpack?

简单总结为：
（1）文件打包（把多个文件打包成一个js文件，减少服务器压力，带宽）
（2）文件转化（运用loader将less,sass,ts转化）
（3）优化（SPA越来越盛行，前端项目复杂度高了）

安装webpack

首先安装前要保证电脑中安装了node环境，由于是webpack5所以要求安装node16以上版本。

1、创建项目：

npm init -y（项目一键生成）
npm init（项目一步一步填写生成）

2、全局安装webpack以及webpack-cli：

npm i/install webpack webpack-cli -g

3、测试安装成功否：webpack -v

运行完上面安装程序后，有可能会出现得情况：

（1）webpack -v不显示版本号问题

System:
OS: Windows 10 10.0.19821
CPU: (8)x64 Intel®Core ™ i5-8265U CPU @ 1.60GMemory:1.28 GB / 15.81 GB
Binaries:
Node: 19.1.0- C: Program Files\nodejs\node. EXE
npm: 8.19.3 -C: Program Files\node js \npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0)，Chromium (107.0.14）
Internet Explorer: 11.0.19041.1566）

webpack 安装后，但是查询不到对应版本号而输出如上信息，原因还是没能成功安装

解决方法：
npm install webpack@5.46.0 -g #@后面加上需要安装的版本号
再次查询便能成功查询到 webpack 的版本号了

（2） 安装后使用指令 webpack -v报错
webpack : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本…出现这个问题是因为系统权限不足：

解决方法：
打开电脑的powershell窗口，记住一定要以管理员身份打开
先输入 set-ExecutionPolicy RemoteSigned
然后输入 y 回车
以上方案可以解决 webpack -v报错问题

（3）安装后使用指令 webpack -v不会有任何内容输出

原因是webpack与webpack-cli版本不兼容，指定他们的版本号安装：npm i webpack@5.46.0 webpack-cli@4.7.2 -g
提示：看到webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件报错信息时看一下是不是没有加-g

4. 启用 Webpack

开发模式

npx webpack ./src/main.js --mode=development

生产模式

npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。
./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
--mode=xxx：指定模式（环境）。