【Vue知识点- No1.】webpack

1.yarn包管理器

yarn包管理器是快速、可靠、安全的依赖管理工具。和 npm 类似, 都是包管理工具, 可以用于下载包, 就是比npm快。

中文官网地址: https://yarn.bootcss.com/

1-1.下载yarn

下载地址: https://yarn.bootcss.com/docs/install/#windows-stable

• windows - 软件包(在笔记文件夹里)
• mac - 通过homebrew安装(看上面地址里)
• mac如果没安装过homeBrew先运行这个命令

/usr/bin/ruby -e "$(curl -fsSL http://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"

• 上面命令如果不行: 试试这个: curl -o- -L https://yarnpkg.com/install.sh | bash (直接安装yarn)

不要安到带中文的路径下, 建议在C盘/

1-2.使用yarn

与npm类似, 可以试试, 新建一个空白文件夹, 执行以下命令尝试一下。

# 1. 初始化, 得到package.json文件(终端路径所在文件夹下)
yarn init

# 2. 添加依赖(下包)
# 命令: yarn add [package]
# 命令: yarn add [package]@[version]
yarn add jquery
yarn add jquery@3.5.1

# 3. 移除包
# 命令: yarn remove [package]
yarn remove jquery
             
# 4. 安装项目全部依赖(一般拿到别人的项目时, 缺少node_modules)          
yarn
# 会根据当前项目package.json记录的包名和版本, 全部下载到当前工程中

# 5. 全局
# 安装: yarn global add [package]
# 卸载: yarn global remove [package]
# 注意: global一定在add左边
yarn global add @vue/cli
# 如何使用, 为明天学习vue做铺垫

1-3.yarn可能遇到的问题

如果报错参考报错文档: http://itcz_jiaoyu.gitee.io/error/#811

2.知识点自测

• 什么是模块, 模块化开发规范(CommonJS / ES6)

CommonJS规范

// nodejs - commonJS规范-规定了导出和导入方式
// 导出 module.exports = {}
// 导入 const 变量 = require("模块标识")

ES6规范

// 导出 export 或者 export default {}
// 导入 import 变量名 from '模块标识'

字体图标的使用

1. 可以去阿里巴巴矢量图标库, 选中想要的图标, 登录后, 生成css文件和字体文件
2. 下载css文件和字体文件, 也可以使用在线地址
3. 在自己页面中引入iconfont.css, 并在想显示字体图标的标签上使用类名即可

箭头函数

const fn = () => {
   }   
fn()

const fn2 = (a, b) => {
   return a + b} 
fn(10, 20); // 结果是30

// 当形参只有一个()可以省略
const fn3 = a => {
   return a * 2}
fn(50); // 结果是100

// 当{}省略return也省略, 默认返回箭头后表达式结果
const fn4 = a => a * 2;
fn(50); // 结果是100

服务器

• 什么是服务器, 本地启动node服务, 服务器和浏览器关系, 服务器的作用。

服务器是一台性能高, 24小时可以开机的电脑。
服务器可以提供服务(例如: 文件存储, 网页浏览, 资源返回)。
在window电脑里安装node后, 可以编写代码用node 启动一个web服务, 
来读取本地html文件, 返回给浏览器查看。

浏览器 -> 请求资源 -> 服务器
浏览器 <-  响应数据 <- 服务器

• 开发环境 和 生产环境 以及英文"development", “production” 2个单词尽量会写会读。
• 初始化包环境和package.json文件作用。
• npm下载的包和对应版本号, 都会记录到下载包时终端所在文件夹下
  的package.json文件里。
• package.json中的dependencies和 devDependencies区别和作用:

* dependencies 别人使用你的包必须下载的依赖,
  比如yarn add jquery
* devDependencies 开发你的包需要依赖的包,
  比如yarn add webpack  webpack-cli -D (-D 相当于--save-dev)

• 终端的熟练使用: 切换路径, 清屏, 包下载命令等：

切换路径  cd  
清屏 cls 或者 clear

• 对base64字符串, 图片转base64字符串了解
• 在线转换图片：http://tool.chinaz.com/tools/imgtobase/

3.今日学习目标

1. 能够理解webpack基本概念和作用。
2. 能够掌握webpack使用步骤。
3. 能够使用webpack相关配置。
4. 能够使用webpack开发服务器。
5. 能够查阅使用webpack中文文档。

4. webpack

4-1. webpack基本概念

定义: webpack本身是 node 的一个第三方模块包, 用于打包代码：

webpack官网

• 现代 javascript 应用程序的 静态模块打包器 (module bundler)

• 为要学的 vue-cli 开发环境做铺垫。

4-2. webpack能做什么

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度(演示准备好的例子)

其中的功能:

• less/sass -> css
• ES6/7/8 -> ES5
• html/css/js -> 压缩合并

4-3. webpack的使用步骤

webpack基础使用

目标: 把src下的2个js文件, 打包到1个js中, 并输出到默认dist目录下：

• 默认入口: ./src/index.js
• 默认出口: ./dist/main.js

注意：路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名。

1.初始化包环境：yarn init
2.安装依赖包：yarn add webpack webpack-cli -D
3.配置scripts(自定义命令)

scripts: {
   
	"build": "webpack"
}

4.新建目录src
5.新建src/add/add.js - 定义求和函数导出

export const addFn = (a, b) => a + b

6.新建src/index.js导入使用

import {
   addFn} from './add/add'
console.log(addFn(10, 20));

7.运行打包命令： yarn build 或者 npm run build

总结