webpack【1】node.js、cnpm、webpack、webpack-cli，vue-cli安装与环境变量配置；VsCode中js文件打包

目录

1、下载安装node.js

2、自定义配置npm安装模块时的路径和缓存的路径

3、环境变量：【如果没配置好会在使用VsCode时显示：node : 无法将“node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。】

4、安装web_pack 

5、安装cnpm配置淘宝镜像

​6、使用cnpm安装vue-cli、安装webpack-cli和webpack-dev-server

7、VsCode中对js文件进行打包【常见错误都可按图解决如：

WARNING in configuration The 'mode' option has not been set；

ERROR in main Module not found: Error: Can't resolve ；

npm ERR! code EPERM】

---

1、下载安装node.js

Index of /dist/v16.15.0/

选择.msi结尾的安装文件。可以自己找别的版本的进行安装。

下载好后根据教程安装即可，可以自定义安装路径和选择是否安装相应工具【最好勾选上】，这里不配图了。它会自动配置环境变量，下文会说明我们如何去改。

安装成功后打开cmd，管理员身份运行，输入命令可查看安装版本信息。

2、自定义配置npm安装模块时的路径和缓存的路径

找到node.js安装文件，并新建两个文件夹如图。

cmd运行如图命令，将路径设为刚刚新建的两个文件夹的路径：

3、环境变量：【如果没配置好会在使用VsCode时显示：node : 无法将“node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。】

1、用户环境变量编辑Path，将C盘下的npm路径改为刚刚新建的node_global文件夹。 

添加node.js安装路径。 

2、系统环境变量设置，新建环境变量NODE_PATH,路径为node.js的node_modules文件夹。

4、安装web_pack 

cmd管理员下运行如图命令： -g 为全局安装 可以加@符号指定版本号。

等出现安装成功信息后，在输入查看webpack版本命令，说明安装成功 。

5、安装cnpm配置淘宝镜像

 配置淘宝镜像；

6、使用cnpm安装vue-cli、安装webpack-cli和webpack-dev-server

可以加@符号指定版本号。 vue-cli 安装3.0版本；vue/cli安装4.0+,这里最好安装高版本

 

7、VsCode中对js文件进行打包【常见错误都可按图解决如：

WARNING in configuration The 'mode' option has not been set；

ERROR in main Module not found: Error: Can't resolve ；

npm ERR! code EPERM】

1、        VsCode要以管理员身份运行，        Ctrl+~        打开终端，cd命令到项目文件下，先初始化，生成package.json文件， 

 

 然后package.json中添加配置：

 2、输入代码打包。要注意本图项目结构，因为我是webpack5.0.0+，所以代码为： npx webpack --entry 导出文件.js -o 导入文件夹 --mode=development【打包生成的文件名默认为导出源文件名】

代码：        npx webpack --entry ./src/main.js -o ./dist --mode=development

3、配置文件快速打包：

可以参考：Webpack安装配置及打包详细过程 - 码探长 - 博客园

安装失败时可以清除一下缓存：

 下一篇文档链接：webpack【2】相关loader，plug配置_z输关的博客-CSDN博客