Webpack

一、安装webpack

安装webpack首先需要安装node.js、node.js自带了软件包管理工具npm

1、查看自己的node版本

node -v

2、全局安装webpack(这里先指定版本为3.6.0，因为vue cli2依赖该版本)

npm install [email protected] -g

3、局部安装webpack（后续才需要）

--save-dev是开发时依赖，项目打包后不需要继续使用

4、为什么全局安装后，还需要局部安装呢？

在终端直接执行webpack命令，使用的是全局安装的webpack
当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

5、查看webpack版本

webpack -v

二、安装vuecli脚手架

首先需要安装node和webpack

1、安装

npm install -g @vue/cli

注意：上面安装的是VUE CLI3的版本，如果想按照Vue CLI2的方式初始化项目是不可以的。

2、查看版本

vue  --version

3、拉取2.x模版

npm install -g @vue/cli-init

//vue init 运行效果与[email protected]相同

4、Vue CLI2初始化项目

vue init webpack my-project

5、Vue CLI3初始化项目

vue create my-project

三、修改npm源

1、临时使用

在 npm install XXX 时加入--registry URL即可，不会影响到本地配置，如：
npm --registry https://registry.npm.taobao.org install express

2、持久使用

永久修改本地npm的配置
npm config set registry https://registry.npm.taobao.org

3、查看npm源地址有没有换成功

npm config get registry

4、重置为官方源

npm config set registry https://registry.npmjs.org/

四、vue-cli 3与2版本有很大区别

vue-cli3是基于webpack4打造，vue-cli2还是webpack3
vue-cli3设计原则是“0配置”，移除了配置文件根目录下的build和config等目录
vue-cli3提供了vue-ui命令，提供了可视化配置，加入人性化
移除了static文件夹，增加了public文件夹，并且index.html移动到public中