前言

如果我们需要使用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

webpack(1)安装环境与解决环境问题的更多相关文章

  1. Webpack的理解以及解决了的问题

    一.背景 Webpack 最初的目标是实现前端项目的模块化,旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候,我们会通过文件划分的形式实现模块化,也就是将每个功能及其相关状态数据各自单独放 ...

  2. webpack 配置别名,解决 import 时路径查找麻烦的问题

    在编写代码时,使用 import 导入别的文件,可能会遇到查找路径麻烦的问题 比如这里的 ../../ 还要去思考多少个 ../ 那么可以在 webpack 中,将 src 目录设置一个别名,方便文件 ...

  3. Apache服务器安装过程及问题的解决(for windows system32bit)

    在使用Hbuilder设计网站时,在制作本站搜索时,用到了Php文件,而Hbuilder的内置web服务器不支持php的解析, 所以需要安装配置外部服务器,有多个选择,我安装的apache服务器,并遇 ...

  4. 基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...

  5. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  6. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  7. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  8. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

  9. 使用 webpack + react + redux + es6 开发组件化前端项目

    因为最近在工作中尝试了 webpack.react.redux.es6 技术栈,所以总结出了一套 boilerplate,以便下次做项目时可以快速开始,并进行持续优化.对应的项目地址:webpack- ...

随机推荐

  1. 【转载】spice 有截图

    https://segmentfault.com/a/1190000011991047

  2. 开机自动挂载本地yum源-20200402-V0.1

    开机自动挂载本地yum源-20200402-V0.1 已下载本地iso /home/Kylin-Server-10-mips64-Release-Build04.08-lic-20200313.iso ...

  3. debian配置---->/etc/apt/sources.list apt基本源设置指南

    yum或apt基本源设置指南   关于: 管理Linux服务器的运维或开发人员经常需要安装软件,最常用方式应该是通过Linux系统提供的包管理工具来在线安装,比如centos的yum,ubuntu或d ...

  4. Java public 和 private 访问修饰符

    何为封装 从事面向对象编程的 Java 程序员,不可能不知道封装,它是面向对象编程的精髓,非常重要. 那什么是封装?字面意思就是把摆在外面的东西包起来. 一句话,封装就是对外隐藏内部细节. 那为何要封 ...

  5. MyBatis 开启 Log4j 日志调试信息开关

    Log4j 是什么 Log4j 是由 Apache 提供的开源日志框架,用于帮助用户处理日志信息. Log4j 能将日志信息分级打印和存储,而且提供了日志不同的存储方式,我们可以将日志发送到控制台,或 ...

  6. 10.11 arping:发送arp请求

    arping命令 是用于发送arp请求到一个相邻主机的工具,arping使用arp数据包检查局域网内所有设备的硬件地址.  arping 命令的参数选项及说明 -c <次数>       ...

  7. 三大主流开源硬件对比:Arduino vs Raspberry Pi vs BeagleBone

    http://www.elecfans.com/emb/361236_3.html 下文摘自上面的链接 软硬件整合是今年一再被提及的话题,如今我们也可以看到不少硬件创业的成功案例,比如Jawbone ...

  8. 性能调优命令之jstack

    jstack是java虚拟机自带的一种线程堆栈跟踪工具. /opt/java8/bin/jstack Usage: jstack [-l] <pid> (to connect to run ...

  9. 稀疏自编码器及TensorFlow实现

    自动编码机更像是一个识别网络,只是简单重构了输入.而重点应是在像素级重构图像,施加的唯一约束是隐藏层单元的数量. 有趣的是,像素级重构并不能保证网络将从数据集中学习抽象特征,但是可以通过添加更多的约束 ...

  10. 从PyTorch到ONNX的端到端AlexNet

    从PyTorch到ONNX的端到端AlexNet 这是一个简单的脚本,可将Torchvision中定义的经过预训练的AlexNet导出到ONNX中.运行一轮推理Inference,然后将生成的跟踪模型 ...