１． 为什么需要模块化
如果有下面这种情况
util.js文件里面定义了下面这个函数
function getFormatDate(a,b){
return a+b;
}
a-util.js中需要用到util.js里面的getFormatDate这个函数
function aGetFormatDate(c){
return aGetFormatDateFormatDate(2,c);
}
a.js里面需要用到a-util里面的aGetFormatDate()这个函数
function get(){
console.log(aGetFormatDate(7));
}
如果我们采用原始的方法，用
<script src="util.js"></script>
<script src="a-util.js"></script>
<script src="a.js"></script>
会出现这样的问题：
因为用<script>标签是按顺序加载的，必须保证a-util.js在util.js后面，函数中变量必须是全局变量，这样才能暴露出来给其他函数使用，容易造成全局变量污染。
而且当你只需要a.js的时候，你只知道依赖a-util.js，你不知道需要依赖util.js，还是会出现错误。你必须很清楚他们之间的依赖关系。
当使用模块化的时候，就不会有这样的问题。
util.js
export{
getFormatDate:function(a,b){
return a+b}} //将你要暴露的函数暴露出来
a-util.js
var getFormatDate=require('util,js')//引用所依赖的文件，取到你要用的函数
export{
aGetFormatDate:function(c)
return getFormatDate(2,c);
}
}
a.js
var aGetFormatDate=require('a.js')//引用所依赖的文件'a,js'，取到要用的函数aGetFormatDate
console.log(aGetFormatDate(7));
这个时候我们只要直接引用 <script src="a.js"></script>这个最表面的ｊｓ文件即可，其他根据依赖关系自动加载。
每个ｊｓ文件都知道自己依赖什么其他文件，让他们自动加载即可
而且也不用做成全局变量
ＡＭＤ 中ｒｅｑｕｉｒｅ．ｊｓ规范
要下载ｒｅｑｕｉｒｅ．ｍｉｎ．ｊｓ这个包，再引入入口文件，也就是我们看到的最表层的文件，ｍａｉｎ．ｊｓ
看一下我们的ｒｅｑｕｉｒｅ实例
不需要依赖任何一个其他文件的ｕｔｉｌ
需要依赖ｕｔｉｌ的ａ－ｕｔｉｌ
最后在控制台打印出４
ＡＭＤ是异步加载Ｃｏｍｍｏｎｊｓ是一次性全部加载
在html网页中，浏览器通过<script>标签加载js脚本。
ES6模块允许内嵌在网页中，也就是在＜ｓｃｒｉｐｔ＞标签里面，语法行为与加载外部脚本一致；
如下：
<script type="module">
import utils from "./utils.js"; // other code
</script>
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
本机开启
主要命令为：
cnpm install http-server -g ／／开启服务
http-server -p 8088 ／／选择端口
关于ｗｅｂｐａｃｋ的配置
自己新建一个webpack.config.js文件
在里面进行入口文件和输出文件的设置
const path = require("path") //定义一个路径，这个是一定要写的，可以不用管他,就当作是我们这一整个webpack项目的位置
module.exports={
entry:path.join(__dirname,"src/script/main.js"), //设置了程序的入口.就在这个项目src下面的script下面的main.js,注意dirname前面是__
output:{
filename:"bundle.js", //输出的文件名为bundle.js
path:path.join(__dirname,"dist") //设置了输出文件名的路径，在本项目的dist文件夹下面，没有的话webpack会自己建的
}
}
//module.exports就要要想外界暴露的部分，外面的人可以根据这个来进行操作
简而言之，构建一个ｗｅｂｐａｃｋ应用的步骤如下：
１. 新建一个文件夹，这里我给他起个名字叫 web
２. 在web的路径下用命令行
cnpm install webpack --save-dev ／／我已经用淘宝镜像了ｃｎｐｍ
３. 自己新建ｗｅｂｐａｃｋ．ｃｏｎｆｉｇ．ｊｓ定义入口和出口文件
４. 弄个ｊｓ文件什么的打包
在web的路径下用命令行
webpack
就可以了
打包出来的ｂｕｎｄｌｅ．ｊｓ为什么有那么多乱七八糟的内容？
只要是为了封装ｊｓ，使其支持ｃｏｍｍｏｎｊｓ的模块化
ｃｏｍｍｏｎｊｓ是要依赖于ｎｏｄｅｊｓ ｗｅｂｐａｃｋ的
调用的时候是这样的
上面的这个文件名叫ａ－ｕｔｉｌ
引用出来的对象的名字是ａＵｔｉｌ
看两张图好好感受一下
0713
commonjs中：
module对象：在每一个模块中，module对象代表该模块自身。
export属性：module对象的一个属性，它向外提供接口。
实例：
建立了一个模块，向外面暴露出f1函数
module.exports = {
f1:function(){
console.log(1234);
}
}
var util=require('./util.js');
util.f1();
用webpack命令打包之后，可以index页面的控制台打印出1234
成功
文件目录如下：
如何用webpack压缩js代码
-
首先在webpack.config.js中引入
const uglify = require('uglifyjs-webpack-plugin');
2.然后在entry和output后面加上
plugins:[
new uglify()
]
然后再执行“webpack”命令编译一下
被压缩啦
webpack都做了哪些事情？
模块化
打包依赖
webpack支持commonjs,如果没有模块化，用<script>标签引入，我们要完全搞清楚每个模块之间的依赖关系，要保证你依赖的js文件在你这个文件的前面，搞错一个依赖关系就完蛋，而且要定义很多全局变量，会造成全局变量污染。
webpack的理念就是一切皆模块，把那一大堆css,js在我的一个总入口文件require引入，剩下的事情webpack会自动处理，包括所有模块的前后依赖关系去下载啊处理
压缩Js代码
先了解一下Webpack从构建到输出文件结果的过程：
1.解析配置参数，合并从shell传入和webpack.config.js文件的配置信息，输出最终的配置信息
2.注册配置中的插件，好让插件监听webpack构建生命周期中的事件节点，做出对应的反应
3.解析配置文件中entry入口文件，并找出每个文件依赖的文件，递归下去
4.在递归每个文件的过程中，根据文件类型和配置文件中loader找出相对应的loader对文件进行转换
5.递归结束之后得到每个文件最终的结果，根据entry配置生成代码chunk
6.输出所有chunk到文件系统
linux常见命令
windows系统下面可以直接用git bash,命令就是shell命令
mkdir src在当前目录下面新建一个名字叫src文件夹
ls 查看当前路径下面的文件夹
ll 跟ls差不多，比ls详细一点
vi a.js 如果a,js不存在就新建，如果存在就编辑
这个是文本编辑器，执行这个命令之后会进入编辑页面，要先按 i 才能进入输入模式，按esc就又不在输入模式下面了。
比如在编辑完了就按esc，然后再输入:w(这个是显示在下面的）,w是保存
：q 是退出。
cat a.js 不用进入编辑模式就是查看文本内容
head a.js 不用进入编辑模式就是查看文本的前部分内容
tail a,js 不用进入编辑模式就是查看文本的前部分内容
head -n 1 a.js 查看第一行内容
tail -n 2 a.js 查看后面两行内容
grep "2" a.js 在a.js里面寻找有2的内容
rm a.js 对某个文件进行删除
mv a.js src/a.js 将a.js移动到src文件夹下面
项目的上线回滚过程：
- 将测试完成的代码提交到git版本库的master分支
- 将当前服务器的代码全部打包并记录版本号，备份
- 将master分支的代码提交覆盖到线上服务器，生成新版本号
回滚流程要点：
- 将当前服务器的代码打包并记录版本号，备份
- 将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号
输入url到浏览器出现相关页面，这中间发生了什么
- 浏览器将域名发给DNS服务器进行解析，然后DNS返回给浏览器对应的IP地址。
- 浏览器向这个IP的机器发送HTTP请求（建立在TCP连接上面）
- 服务器收到，处理并且返回http请求
- 浏览器得到返回内容
- 浏览器渲染页面的过程
- 根据HTML结构生成DOM TREE
- 根据CSS生成CSSOM（结构化处理形成CSS对象模型）
- 将CSSOM和DOM整合起来形成RenderTree(渲染树）
- 浏览器根据RenderTree进行渲染展示
- 遇到<script>会执行并且阻塞渲染，因为js有能力改变dom,不能一边渲染一边改变dom，浏览器会混乱的。
