前端开发技术栈开发流程及其版本异同

系统环境：MAC
技术栈：nvm/node/npm/nrm/vue-cli/webpack

NVM：
用于控制/切换node版本
文件路径：Users - .nvm - version - node
常用指令：

nvm off //关闭版本管理器
nvm on //开启版本管理器
nvm -v/nvm --help //显示命令帮助
nvm --version // nvm版本号
nvm ls //列出本机所有node版本
nvm install [-s]  //安装指定node版本 例如：nvm install 8.12.0
nvm uninstall  //卸载指定node版本
nvm use 14.2 //指定使用node版本
nvm alias default  //指定默认node版本

NODE.JS
node是javascript的运行/编译环境
目的：为了让JavaScript可以和其他的后端语言一样能够在浏览器上运行

NPM：包管理器

NRM：切换npm源管理器
常用指令：

nrm -V //查看版本号
nrm ls //查看所有源
nrm use [registry] //切换源
nrm test [regostry] //测试源速度

Vue-cli(2/3/4):

vue -V / vue --version //查看当前vue-cli版本

版本异同：

安装：
2：npm install -g vue-cli
3：npm install -g @vue/cli@版本号
4：npm install -g @vue/cli

创建：
2：vue init webpack demo
3/4:vue create demo

目录:
2：有build/confg
3、4：增public，取消build/confg

启动：
2：npm run dev
3：npm run serve

配置环境变量
2：在config和build中配置
3/4: 
1.  在根目录添加`.env`文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。
2.  在根目录添加`.env.local` 文件，配置所有情况下都会用到的配置，与`.env`的区别是只会在本地，该文件不会被git跟踪。
3.  在根目录添加`.env.[mode]` 文件，配置对应某个模式下的配置,比如：.env.development来配置开发环境的配置。
4.  在根目录添加`.env.[mode].local`文件，配置对应某个模式下的配置,与`.env.[mode]`的区别也只是会在本地生效，该文件不会被git跟踪。
使用环境变量：
1.在项目中使用必须以VUE_APP开头
2.在webpack中使用直接process.env.调用

WEBPACK（1/2/3/4）
版本异同：

webpack4以后分离webpack与webpack-cli；
webpack4相对于3：
1. mode 配置
2. Loader 使用规则
3. babel 命名规则
4. CommonsChunkPlugin：代码拆分插件
5. mini-css-extract-plugin: css代码抽离插件
6. UglifyJsPlugin：js代码压缩插件
7. happypack：多进程loader打包