1. webpack构建流程
2. webpack工作流
3. webpack热更新(HMR)
4. webpack常见的loader
5. webpack常见的plugin
6. loader和plugin的区别
7. 依赖版本锁定原理
8. Nginx
1. webpack的构建流程
初始化：启动构建，加载plugin，实例化compiler
编译:从entry出发，针对每个module调用对应的loader去翻译对应的内容，再找到该Module对应的Module，递归的进行编译处理
输出：将编译后的Module组合成chunk，将chunk转换成文件，输出到文件系统中
详细流程：
初始化参数-> 开始编译 -> 确定入口 -> 编译模块 -> 完成模块编译 -> 输出资源 -> 输出完成
2. webpack工作流
webpack的5个核心模块：
Entry：webpack开始构建的入口模块，构建直接依赖和间接依赖模块
Output：命名输出的文件和输出的目录
Loaders：**webpack只能处理js文件**，将非js文件如sass文件需要处理成webpack能处理的模块
Plugin：从打包优化和压缩，重新定义环境中的变量。贯穿webpack的整个生命周期，执行不同的任务
Chunk：对一些代码打包成一个单独的chunk，实现单独加载。按需加载公共模块，优化加载时间，去重，利用缓存。
webpack事件流机制的核心是Tapable。因为负责编译的Compiler和负责创建bundles的Compilation都是Tapable。
webpack打包原理：对每个引用的模块都赋予ID，相同的模块共用一个ID，不会造成循环依赖
3.webpack的热更新
HMR（Hot Module Replacement）:指开发过程中对代码进行修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器端用新的模块替换到旧的模块，去实现局部更新页面而非整体刷新页面，比如修改了一个字段，只刷新之前的字段，不刷新整个页面，从而不会丢失路由和数据。
这是基于webpack-dev-server的热模块更新功能。
本质上是解决在开发过程中，修改代码之后，保持数据状态，但是不会导致页面刷新使路由状态和表格数据丢失，只将模块进行更新替换。保留现有的数据，又能看到修改后的变化。
配置：修改webpack-dev-conf.js里的plugins:[HotModuleReplacementPlugin]
原理：
1.使用express启动本地服务，当浏览器访问资源时对此作出响应
2.客户端和服务端通过socket实现长连接
3.webpack监听源文件的变化，放开发者保存文件时触发webpack的重新编译compile
(1)每次保存都会生成hash值，已改动模块的json文件，已改动模块代码的js文件
(2)编译完成后通过socket向客户端推送当前编译Compile的hash戳
4.客户端webSocket监听到有文件改动传过来的hash戳，会和上一次进行对比
(1)一致走缓存
(2)不一致通过ajax和jsonp向服务端获取最新资源
5.使用内存文件系统去替换有修改的文件内容实现局部刷新
其他涉及点
入口模块index.js引用两个模块timer.js和foo.js
module.hot.accept() 告诉 Webpack，当前模块更新不用刷新
module.hot.decline() 告诉 Webpack，当前模块更新时一定要刷新
使用jsonp的原因是获取的代码可以直接执行，socket获取的字符串需要再做处理
4. webpack常见的loader
1.file-loader:把文件输出到一个文件夹中， 处理图片和文字，
2.url-loader：与file-loader类似，用户可以设置一个阈值，即limit：10000（处理图片和文字），小于阈值会返回文件的base64形式的编码
3.json-loader：加载json文件，默认包含.
4.babel-loader：ESNext转换成ES5
5.sass-loader: 将SASS/SCSS代码转换成css
6.css-loader：加载css，支持模块化、压缩、文件导入
7.style-loader：把css代码注入到JavaScript中
8.postcss-loader：扩展css语法，
9.vue-loader：加载vue.js单文件组件
10.raw-loader: 加载文件原始内容(UTF-8)
11.image-loader：加载并且压缩图片文件
12.ts-loader：将typescript转换成JavaScript
13.awesome-typescript-loader：类似ts-loader，性能优于ts-loader
14.eslint-loader：通过eslint检查JavaScript代码
15.svg-inline-loader：将压缩后的svg内容注入到代码中
16.source-map-loader：加载额外的source map文件，方便断点调试
17.lazy-loader：懒加载loader
5. webpack常见的plugin
1.define-plugin：定义环境变量
2.HotModuleReplacementPlugin:启用热模块更新HMR
3.html-webpack-plugin: 依赖html-loader，创建HTML文件
4.web-webpack-plugin: 单页应用输出html文件，性能优于html-webpack-plugin
5.uglifyjs-webpack-plugin：压缩，但不支持ES压缩(webpack4之前)
6.terser-webpack-plugin：支持压缩ES6(webpack4)
7.**mini-css-extract-plugin：分离样式文件，css提取独立文件，支持按需加载**
8.serverice-worker-plugin：为网页应用增加离线缓存功能
9.clean-webpack-plugin：目录清理
10.webpack-bundle-analyzer：可视化webpack输出文件的体积
6. loader与plugin的区别
1.loader本质是一个函数，对函数接受的内容进行转换，返回转换后的结果
plugin本质是插件，基于事件流框架tapable，在webpack运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，通过webpack的API改变返回结果
2.loader在module.rules中配置，定义模块解析规则，类型是数组。包括test(文件类型)、loader、option(参数)等属性。
plugin在plugin中配置，类型是数组，参数通过构造函数传入。
7. 依赖版本锁定原理：package-lock.json
语义化版本(semver)，规则如下：
版本格式version:xyz，依次指大版本、次要版本、小版本
指定版本：格式如1.2.2，只安装1.2.2版本
最新小版本：波浪号，格式如~1.2.2，安装1.2.x的最新版本，不低于1.2.2，不改变大版本、次要版本。
最新次要版本：插入号，格式如`1.2.2，安装1.x.x的最新版本，不低于1.2.2，不改变大版本。注意：如果大版本号为0，则插入号行为与波浪号相同，说明处于开发阶段，次要版本改变也可能引发程序不兼容。
last：安装最新版本
注意点：
1.package-lock.json文件在项目安装依赖时，将以该文件进行解析安装指定版本依赖包，而不用package.json。
2.npm5.4.2版本后的package-lock.json相当于install的快照，指明了直接依赖版本和间接依赖版本。
3.cnpm不支持package-lock，它会忽视该文件，所以同样的package.json使用npm和cnpm安装的依赖包会不一致。尽量不要使用，为解决速度问题可以设置npm代理，
设置淘宝镜像代理：npm config set registry https:
查看设置代理： npm config get registry
8. Nginx
Nginx具有反向代理、负载均衡的功能。
正向代理代理客户端，反向代理代理服务器。
http{
server{
listen 80;
server_name localhost;
location / {
root /u02/nginx/bfitkweb;
index index.html index.htm;
try_files $uri $uri/ /tkbfi/bfi/index.html;
add_header Cache-control no-cache;
add_header Cache-control private;
exprise -1s;
}
loaction /tkbfi/login{
proxy_pass http:
}
location @router{
rewrite ^/(.*) // 重写拦截进来的请求，对域名之后，参数之前的进行重写
}
}
}
