webpack铺垫

一. yarn包管理器

yarn介绍：

快速、可靠、安全的依赖工具。类似npm，由facebook团队开发和维护，都是包管理器，可以下载包，较npm快。

下载：

npm全局安装

windows：npm i yarn -g

mac：sudo npm yarn -g

检测：yarn -v

使用：

package.json文件作用：管理记录下载第三方模块信息

1.初始化，得到package.json文件（终端路径在文件夹下）

yarn init -y

2.添加依赖（下包）

yarn add jquery

yarn add [email protected]

3.移除包

yarn remove jquery

yarn remove 具体某一文件

4.安装项目全部依赖（相当于npm i）

yarn 

5.全局

yarn globle add @vue/cli

yarn globle add 全局安装的包名

二. 模块化语法

1. CommonJS模块化规范

nodejs - commonJS规范 - 规定了导入和导出的方式

导出：module.exports = {} export.xxx = function(){}

导入：const 变量 = require("模块标识")

2. ES6模块化规范

导出：export 或者 export default {}

导入：import 变量名 from "模块标识"

三. package.json文件的作用

npm下载的包对应的版本号，都会记录到下载包时终端所在的文件夹下的package.json中

四. 图片转base64格式

在线转换：http://tool.chinaz.com/tools/imgtobase/

图片转base64后：

优点：不会再请求服务器调用图片资源，减少了服务器访问次数

缺点：文件体积会增大原来的33%左右