前言

如果我们需要使用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. Python数模笔记-PuLP库(2)线性规划进阶

    1.基于字典的创建规划问题 上篇中介绍了使用 LpVariable 对逐一定义每个决策变量,设定名称.类型和上下界,类似地对约束条件也需要逐一设置模型参数.在大规模的规划问题中,这样逐个定义变量和设置 ...

  2. ssh登录巨慢加速验证

    ssh登录巨慢怎么办,设计验证是好的,但是那些验证的确没啥用反而造成了一些不便修改/开启 /etc/ssh/ssh_config这三个参数再重启即可取消验证 StrictHostKeyChecking ...

  3. LESS语法学习笔记

    LESS 通过编写less文件来快速生成css文件,对css的语法进行了扩展 Less语法 注释 单行注释不会被编译,多行才会被编译 变量 less:定义变量用@ scss:定义变量用$ @num: ...

  4. pika详解 (一)

    pika详解 (一) 本文链接:https://blog.csdn.net/comprel/article/details/94592316 pika pika处理消息可以简单分为以下几个步骤: 我们 ...

  5. Go语言介绍(背景、特点)

    一.go语言的背景 Go是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go(又称 Golang)是 Google 的 Rob Pike(罗勃.派克),Ken Thompson(肯· ...

  6. Jmeter- 笔记11 - 持续集成

    CICD:持续集成 持续交付 进行持续集成的首选工具:Jenkins 性能测试中持续集成:Jenkins(管理集成) + Jmeter(性能工具) + ant(编译代码) ant安装配置步骤: 1.下 ...

  7. camera中LENS和SENSOR的CRA是如何搭配的?

    camera中LENS和SENSOR的CRA是如何搭配的? camera中,lens和sensor的搭配是非常关键的问题.但这两者是如何搭配的呢? 一般在Sensor data sheet中会附有全视 ...

  8. Torchvision模型微调

    Torchvision模型微调 本文将深入探讨如何对 torchvision 模型进行微调和特征提取,所有这些模型都已经预先在1000类的magenet数据集上训练完成.将深入介绍如何使用几个现代的C ...

  9. YOLOv3和YOLOv4长篇核心综述(下)

    YOLOv3和YOLOv4长篇核心综述(下) 4.3.3 Neck创新 在目标检测领域,为了更好的提取融合特征,通常在Backbone和输出层,会插入一些层,这个部分称为Neck.相当于目标检测网络的 ...

  10. 用Auto-TensorCore代码生成优化matmul

    用Auto-TensorCore代码生成优化matmul 将演示如何使用TVM Auto TensorCore CodeGen在Volta/Turing GPU上编写高性能matmul调度.这是一个透 ...