webpack和vue cli 4.4.4的概念理解及搭建

1.webpack

1.1概念

官方文档解释：
At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

从模块和打包的概念上理解就是：

webpack中的模块化

webpack其中一个核心就是模块化开发，并且处理模块间的依赖关系。不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用。

打包

将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

1.2 webpack的安装

1. 安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm
   node.js官网https://nodejs.org/zh-cn/

https://jingyan.baidu.com/article/375c8e19f2918b25f2a22982.html
安装完成后可以通过命令行工具：node -v查看是否安装成功。node.js自带npm，所以node.js安装完成后，不需要再安装npm；输入命令npm -v，可查看当前npm的版本

2. 创建配置文件【package.json】

https://jingyan.baidu.com/article/48a420571e8175a924250494.html
(1)、通过命令提示符，打开存放【package.json】的文件夹;

(2)、输入npm命令：npm init -y创建默认配置文件package.json;

3. 安装webpack：npm install webpack --save-dev
   安装webpack完成后通过输入命令【webpack -v】，查看当前webpack的版本信息，得到提示：不是内部或外部命令……，因为webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli；

4、安装webpack-cli:

（1）.输入命令npm install --save-dev webpack-cli
（2）.然后在输入命令webpack -v，按回车键，得到提示：不是内部或外部命令……，说明webpack还是没有安装成功

（3）.输入命令npm install --global webpack，按回车键；然后在输入命令webpack -v，按回车键，依然没有出现webpack的版本信息，
（4）.就继续输入命令npm install --global webpack-cli，按回车键；然后在输入命令webpack -v，按回车键，出现webpack的版本，就说明安装成功。

全局安装webpack
值得注意的是webpack安装使用npm install --save-dev webpack-cli安装的是最新版本的webpack，若需要指定版本则可使用npm install webpack@4.43.0 -g(这里指定版本为4.43.0)

局部安装webpack
npm install webpack@4.43.0 --save-dev
–save-dev`是开发时依赖，项目打包后不需要继续使用的。

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

2.Vue CLI

2.1概念

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情

• CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
• Vue CLI是一个官方发布 vue.js 项目脚手架
• 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

Vue CLI使用前提 - Node，必须安装node.js（上面的教程已给出）

NPM

• NPM的全称是Node Package Manager
• 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
• 使用NPM来安装一些开发过程中依赖包.

Vue CLI和webpack的关系

Vue.js官方脚手架工具就使用了webpack模板

• 对所有的资源会压缩等优化操作
• 它在开发过程中提供了一套完整的功能，能够使得开发过程中变得高效

2.2Vue CLI的安装

1. 使用命令行语句：npm install -g @vue/cli也可写成npm install @vue/cli -g(位置不影响），安装好了之后可使用vue --version确认查看安装的脚手架版本。
2. cnpm安装
   由于国内直接使用 npm 的官方镜像是非常慢的，也可使用淘宝 NPM 镜像。 你可以使用淘宝定制的 cnpm
   (gzip 压缩支持) 命令行工具代替默认的 npm: npm install -g cnpm --registry=https://registry.npm.taobao.org
   这样就可以使用 cnpm 命令来安装模块了： cnpm install [name]

我安装时遇到问题

• npm ERR! A complete log of this run can be found in: npm ERR!

按照这篇博文的内容成功解决
安装vue cli出现npm ERR! A complete log of this run can be found in: npm ERR!错误（Vue cli）