前言
如果我们需要使用webpack
,就需要依赖node
环境
- nvm
- node
- npm
- webpack@cli
- webpack
nvm安装
nvm
是一个用来管理node
版本的工具。我们之所以需要使用node
,是因为我们需要使用node
中的npm
,使用npm
的目的是为了能够方便的管理一些前端开发的包!nvm
的安装非常简单,步骤如下:
mac/linux安装
1.安装命令
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
2.创建nvm文件夹
mkdir ~/.nvm
3.配置环境变量
编辑环境
vim ~/.zshrc
在文件最后写入环境变量
export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"
# This loads nvm bash_completion
最后重新打开终端即可
4.检查是否安装成功
在终端输入如下命令,出现版本号代表安装成功
? ~ nvm -v
0.37.2
安装文档:https://github.com/creationix/nvm
windows安装
1.到这个链接下载nvm的安装包:https://github.com/coreybutler/nvm-windows/releases。
2.然后点击一顿下一步,安装即可!
3.安装完成后,还需要配置环境变量。在我的电脑->属性->高级系统设置->环境变量->系统环境变量->Path
下新建一个,把nvm
所处的路径填入进去即可!
4.打开cmd
,然后输入nvm
,如果没有提示没有找不到这个命令。说明已经安装成功!
nvm常用命令
安装指定版本的node.js
nvm install [version]
使用某个版本的node
nvm use [version]
列出当前安装了哪些版本的node
nvm list
卸载指定版本的node
nvm uninstall [version]
设置nvm
的镜像
nvm node_mirror [url]
设置npm
的镜像
nvm npm_mirror [url]
安装淘宝镜像
npm
的服务器在国外,所以使用npm
安装时速度很慢,那么可以安装一下cnpm
,并且指定镜像为淘宝的镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
那么以后就可以使用cnpm
来安装包了!
安装webpack5
安装命令
cnpm install -g webpack
安装过程中,会弹出询问是否要安装webpack-cli
,我们选择y
We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install ‘webpack-cli‘ (yes/no): y
如果安装过程中报了以下错误
Error: Cannot find module ‘webpack-cli/package.json‘
解决方案:全局安装webpack-cli
npm i -g webpack-cli
最后使用webpack -v
来验证安装结果,出现以下结果代表安装成功
? ~ webpack -v
webpack 5.43.0
webpack-cli 4.7.2