从零开始搭建webpack环境,自定义node全局组件安装路径

骑猪看日落 2021-11-10 00:22 148阅读 0赞

刚重装完系统，赶紧把环境装了，仍然废了不少时间，这次把遇到的问题都记录下来，便于以后节省时间！本文主要阐述了如何解决webpack安装后命令提示找不到等的问题，以及设置自定义的全局组件安装目录。

## 前言 ##

这次是从零开始安装的教程，从git ----- Tgit ----- node --------webpack共计四个软件，附带资源下载，希望帮助到你可以留言支持一下！

### git ###

安装git十分简单，直接去网上下载安装即可，只要设置一下安装目录，其余均默认即可，这边就不上图了，只有一点需要注意，**git安装目录需要全英文**，如果有汉子可是会报错的，别问我怎么知道的。

### TortoiseGit ###

git的一个辅助工具，不喜欢的直接跳过即可，这个也是选个目录即可，[汉化补丁下载][Link 1]。

### node ###

1.  nodejs算是安装正式开始把，仍然是傻瓜式安装即可，后面的配置最为重要。  
    ![直接傻瓜式安装即可][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70]
2.  安装完毕后命令检测一下安装是否成功  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 1]
3.  一般均没什么问题，我在安装nodejs时候没有遇到什么问题，在这就不演示问题了，如果这个有问题请自行百度。
4.  下面重头戏来了，不要直接安装webpack，请先做以下操作
5.  进入node安装目录，找到如下图npmrc文件，打开文件，文中红色部分为自带部分，这段的意思是定义全局组件安装路径，我们需要把他改成蓝色的即可，当然可以自定义。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 3]
6.  配置环境变量path，在path中添加刚才文件中你添加的路径  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 4]

### webpack ###

1.  命令npm install webpack -g 全局安装webpack，之后回会提示需要安装webpack -cli ，输入y继续安装，这里出错了，原因是需要全局安装webpack-cli![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 5]
2.  执行全局安装webpack-cli npm install webpack-cli -g  
    ![在这里插入图片描述][20190801215212941.png]
3.  完成后输入webpack -v 检测安装成功与否  
    ![在这里插入图片描述][20190801215320630.png]  
    安装成功！

[Link 1]: https://download.csdn.net/download/new_yao/11458458
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70]: /images/20211109/0e6e3e9f0b904ac1b1a3034aab2ae648.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 1]: /images/20211109/2bc63464022c4656b72e348a2a6a51a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 2]: /images/20211109/b63fb27552d04faaa0081ff986800d85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 3]: /images/20211109/21cb92f925ce482eb5d08bc654b7fb87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 4]: /images/20211109/21bdd4ab49894c28b3ec2a7433299ee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 5]: /images/20211109/a95542f1e159461f9e22bb0c4804ad91.png
[20190801215212941.png]: /images/20211109/1822184b3e36427ba0b09a221db5ea6a.png
[20190801215320630.png]: /images/20211109/0ef368e3dcef4adfa7b71f5a9b8180a0.png