前端工程化

版本管理工具：

1.SVN   与 Git 区别

关键词：集中式版本控制系统    分布式版本控制系统  中央服务器  局域网   版本库  在自己PC上

2.如何管理你的项目代码？管理代码中，大多情况下使用 命令行 还是 工具？

开发阶段   用Git 

拉取 一个分支  这个分支上 开发代码  合并到主干

没有冲突  命令行

在提交前：

Git pull 拉取线上代码 

git pull [远程主机名] <远程分支名>:<本地分支名>

Git add 把新的代码写入 缓冲区

Git commit -m “备注”，生成本地版本

最后 Git push 推送

（说白了就是  获取到最新版本的多人一起开发的代码 然后把自己的加上去 写好备注 最后推送）

3.Git fetch 和 Git pull 区别

都是从远程获取最新版本到  本地  fetch不会自动合并，pull会

注意：

版本=》版本库

本地

前端测试：

1.用chrome 模拟设备屏幕尺寸（手机 屏幕 模拟）

右键检查  或者  ctrl+shift+I

点击 手机 图标

2.Android 虚拟机测试

安装  Android 虚拟机

3.Android 真机调试

连接USB数据线，开发者选项=》USB调试

chrome://inspect/#devices=》inspect

4.怎么在手机上调试pc端开发的网站

手机 和 pc连接同一个wifi

package.json:

"dev": "webpack-dev-server --open  --port 3000 --hot --host 172.23.232.1"

--host 后是 wifi IP地址（cmd=》ipconfig）

浏览器网址显示 172.23.232.1:3000/#/home

前段工程化：

1.Webpack 认识   或  什么是 Webpack

模块打包工具   打包各种静态文件（html、js、css、图片、字体）  分析模块间依赖关系

2.利用 Webpack 做些什么   或   Webpack  打包流程

配置 entry 入口文件 output 指定 输出文件

用 babel 把 es6 编译成 es5

用 loader 对 各种资源（css、js、image等） 做处理，把css、js压缩合并，小图生成base64  大图压缩

解析成 浏览器 可编译运行的 内容

3.loader 作用 或者 说说常见的 loader

将浏览器 不能 编译运行的预编译 =》 可以 ，例如 scss=》css  typescript=》js

babel-loader   js   在.babelrc中配置

css-loader  style-loader

less-loader

file-loader  生成的文件名 是 文件内容的 MD5散列值，并保留 引用资源的 原始 拓展名

4.如何创建  package.json

将 命令行 切换到 项目根目录下，npm init，一步步建立

或者  手动创建   写入 name 和 version 字段

5.  Webpack 工作方式

从一个主文件 index.js 中 查找项目 所有依赖，然后使用 loader 来处理，最后生成 js文件

6.如何用 webpack-dev-server  监控文件编译

命令行中 webpack --watch

7. webpack-dev-watch   --port XXXX

8.export、export default、module.export

一个文件里可以用多个export，只有一个export default