安装node.js和webpack

最新推荐文章于 2024-01-03 00:15:00 发布

gishys

最新推荐文章于 2024-01-03 00:15:00 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html+css+javascript

本文链接：https://blog.youkuaiyun.com/gishys/article/details/80567727

html+css+javascript 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何安装和配置Node.js以及Webpack。在安装Node.js时，强调了避免安装路径中出现空格和汉字，以确保命令执行有效。安装完成后，通过`node -v`和`npm -v`验证安装成功。接着设置了全局模块和缓存的路径，并讨论了环境变量`node_path`的作用。在安装Webpack时，遇到了`webpack`命令不可用的问题，解决方法是先设置Webpack的环境变量，再进行安装。最后提到了未安装webpack-cli的问题，可以通过运行特定命令来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装

1.1安装node.js

1.1.1安装及测试

找到官网下载相对应的版本进行安装，如图所示（官网链接）：

下载直接进行安装，其中安装目录最好手动选取，而且路径当中最好不要存在空格以及汉字，经测试后面执行命令时，如果存在汉字及空格，命令会失效。

安装完成后键入node -v进行测试，同时测试npm -v 如果测试成功会显示版本号，如下图所示：

1.1.2环境设置

这里所要设置的是全局模块所在的路径，以及缓存cache的路径。cmd中键入：

npm config set prefix "想要设置的路径一般在安装路径中，可以是node_global"
npm config set cache "想要设置的路径一般在安装路径中，也可以是node_cache"

设置完成后查看路径C:\Users\Administrator下的文件.npmrc，文件中内容为：

prefix=C:\nodejs\nvm\v8.11.2\node_global
cache=C:\nodejs\nvm\v8.11.2\node_cache

环境变量中新建节点node_path，具体的用处还没有找到，设置路径为全局模块所在的路径。

1.2安装webpack

在cmd中键入：

npm install webpack -g

测试如下图所示：

其中产生的问题请转移到bug部分进行查看。

报错："webpack"不是内部或者外部命令。

在第二次安装测试时发现安装webpack后仍然不能使用webpack命令，通过链接进行解决发现，仍然不能解决我的，问题最后经过测试发现，必须先设置webpack的环境变量，然后再一次进行安装，问题解决，感觉要上天

2.bug

One CLI for webpack must be installed. These are recommended choices, delivered
as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
 - webpack-command (https://github.com/webpack-contrib/webpack-command)
   A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

提示此问题需要首先选择：webpack-cli，也就是在cmd中键入（可以参考链接，以及链接）：

webpack-cli

之后提示没有安装webpack-cli，这时候只要键入初始化webpack的语句就可以初始化webpack-cli：

npm install webpack-cli -g
//如果镜像安装使用npmc