webpack，http整理篇

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 解决应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，而后将所有这些模块打包成一个或者多个 bundle。

const path = require('path');module.exports = {  // 单/多入口 entry: string|Array<string>|{[entryChunkName: string]: string|Array<string>}   entry: './src/index.js',   // 或者 entry: {main: './src/index.js'}  // 输出 output 属性告诉 webpack 在哪里输出它所创立的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其余生成文件默认放置在 ./dist 文件夹中  output: {      path: path.resolve(__dirname, 'dist'),      filename: 'my-first-webpack.bundle.js'  },  // loader 让 webpack 能够去解决其余类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被增加到依赖图中  module: {    rules: [      { test: /\.txt$/, use: 'raw-loader' },      {        test: /\.css$/i,        use: ['style-loader', 'css-loader'],      }    ]  },  // 插件可用于打包优化，资源管理，注入环境变量等  plugins: [    new HtmlWebpackPlugin({template: './src/index.html'})  ],  // 模式，4.0版本新添加， development|production|none  mode: 'production',  //默认  // 开发服务器配置  devServer: {    index: 'index.html',    lazy: true,  // 懒惰模式，不监视任何文件修改    contentBase: path.join(__dirname, 'dist'),    compress: true,    port: 9000,    host: '0.0.0.0',    hot: true  }};

grunt，gulp，webpack

前台工程化的早期，主要是处理重复任务的问题。Grunt、Gulp就是其中代表。比方: 压缩、编译less、sass、地址增加hash、替换等，而如今的Webpack更像一套前台工程化处理方案。利用强大插件机制，处理前台静态资源依赖管理的问题。

 Grunt和Gulp属于任务流工具Tast Runner，Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出，让任务更加简洁和容易上手；webpack属于模块打包工具 Bundler

Webpack作者Tobias回复与 Grunt Gulp NPM脚本的比较

• Tobias： NPM脚本对我而言足矣。实际上，说webpack是Grunt/Gulp的替代器并不完全精确。Grunt和Gulp以及NPM脚本都是任务执行程序。

• Webpack是模块打包程序。这两类程序的目标不一样。但webpack简化了必需“过度使用”Grunt和Gulp和NPM脚本才能实现的Web开发任务也是事实。NPM脚本才是Grunt和Gulp的替代品。
  不过，除了纯粹的构建之外，任务运行程序也有存在的理由，比方部署、代码检查、版本管理，等等。

Grunt与Gulp性能比较

• Grunt: 每个任务解决完成后存放在本地磁盘.tmp目录中，有本地磁盘的I/O操作，会导致打包速度比较慢。

// Gruntfile.jsmodule.exports = function(grunt) {  grunt.initConfig({    // js格式检查任务    jshint: {      src: 'src/test.js'    }    //  代码压缩打包任务    uglify: {}  });  // 导入任务插件  grunt.loadnpmTasks('grunt-contrib-uglify');  // 注册自己设置任务, 假如有多个任务可以增加到数组中  grunt.regusterTask('default', ['jshint'])}

// gulpfile.jsvar gulp = require('gulp');var jshint = require('gulp-jshint');var uglify = require('gulp-uglify');// 代码检查任务 gulp 采取了pipe 方法，用流的方法直接往下传递gulp.task('lint', function() {  return gulp.src('src/test.js')    .pipe(jshint())    .pipe(jshint.reporter('default'));});// 压缩代码任务gulp.task('compress'， function() {  return gulp.src('src/test.js')    .pipe(uglify())    .pipe(gulp.dest('build'));});// 将代码检查和压缩组合，新建一个任务gulp.task('default', ['lint', 'compress']);

运行机制

• grunt gulp 思路
  【遍历源文件】->【匹配规则】->【打包】
  做不到按需加载，对打包的资源，能否用到，打包过程不关心。

• webpack
  【入口】->【模块依赖加载】->【依赖分析】->【打包】
  在加载、分析、打包的过程中，可以针对性的做少量处理方案。比方：code split(拆分公共代码)

Gulp vs Grunt

• 乍一看，Grunt和Gulp的基本功能似乎并没有太大区别。两种自动化工具都可以在MIT许可下使用，因而源代码是开放的并且免费提供。这两个应用程序都可以从命令行进行控制，并具备自己的界面。任务运行者还使用相同的包管理器npm。因为它们的插件目录很大，Grunt和Gulp都可以轻松地自动化大量任务。假如没有所需过程的扩展，则可以使用两种工具对其进行编程，虽然因为结构复杂，两个任务运行者都需要JavaScript和node.js的知识。

• 但是，尽管Gulp主要基于node.js模块流，但Grunt主要使用fs（文件系统）模块，这突出了这两个工具之间最重要的区别之一：Grunt严格面向文件并创立临时本地文件在执行任务期间。另一方面，Gulp 通过内存解决这些进程，并将它们立即写入目标文件中，从而使程序具备速度优势。

• 第二个区别特征是两种处理方案的各自概念。Grunt的编程和结构为客户提供了少量指导。已经定义了位于此处的已完成任务，而后必需对其进行简单配置。相比之下，Gulp通过仅提供单个模块为独立编程提供了更多的空间。一方面，这使得更容易了解背景和上下文，同时也要求客户更多。一个项目越大，Gulp的优势就越发挥作用，这就是为什么新的任务执行者现在成为许多人的首选的起因。但是因为较低的要求，Grunt依然是较小的，可管理的项目。

http

概念：超文本传输​​协议（HTTP）是一个用于传输超媒体文档（例如 HTML）的应用层协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其余目的。HTTP 遵循经典的用户端-服务端模型，用户端打开一个连接以发出请求，而后等待它收到服务器端响应。HTTP 是无状态协议，这意味着服务器不会在两个请求之间保留任何数据（状态）。该协议尽管通常基于 TCP/IP 层，但可以在任何可靠的传输层上使用；也就是说，不像 UDP，它是一个不会静默丢失消息的协议。RUDP——作为 UDP 的可靠化更新版本——是一种合适的替代选择

http特性：

1.HTTP 是无连接无状态的

2.HTTP 一般构建于 TCP/IP 协议之上，默认端口号是 80

3.HTTP 可以分为两个部分，即请求和响应。

http请求：

• HTTP 定义了在与服务器交互的不同方式，最常用的方法有 4 种
  分别是 GET，POST，PUT， DELETE。URL 全称为资源形容符，可以这么认为：一个 URL 地址
  对应着一个网络上的资源，而 HTTP 中的 GET，POST，PUT，DELETE
  就对应着对这个资源的查询，修改，增添，删除4个操作。

• HTTP 请求由 3 个部分构成，分别是：状态行，请求头(Request Header)，请求正文。

• HTTP 响应由 3 个部分构成，分别是：状态行，响应头(Response Header)，响应正文。

• HTTP 响应中包含一个状态码，用来表示服务器对用户端响应的结果。
  状态码一般由3位构成：

  1xx : 表示请求已经接受了，继续解决。 2xx : 表示请求已经解决掉了。 3xx : 重定向。 4xx : 一般表示用户端有错误，请求无法实现。 5xx : 一般为服务器端的错误。

常见的状态码：

• 200 OK 用户端请求成功。

• 301 Moved Permanently 请求永久重定向。

• 302 Moved Temporarily 请求临时重定向。

• 304 Not Modified 文件未修改，可以直接使用缓存的文件。

• 400 Bad Request 因为用户端请求有语法错误，不能被服务器所了解。

• 401 Unauthorized 请求未经受权，无法访问。

• 403 Forbidden 服务器收到请求，但是拒绝提供服务。服务器通常会在响应正文中给出不提供服务的起因。

• 404 Not Found 请求的资源不存在，比方输入了错误的URL。

• 500 Internal Server Error 服务器发生不可预期的错误，导致无法完成用户端的请求。

• 502 Bad Gateway 是一种HTTP协议的服务器端错误状态代码，它表示作为网关或者代理商角色的服务器，从上游服务器（如tomcat、php-fpm）中接收到的响应是无效的

• 503 Service Unavailable 服务器当前不能够解决用户端的请求，在一段时间之后，服务器可能会恢复正常。

在浏览器地址栏输入URL之后回车的过程

• URL解析，抽出域名字段

• DNS解析，域名解析成IP

  • 浏览器缓存->操作系统缓存->路由器缓存->ISP缓存->根域名服务器->主域名服务器

• TCP/IP连接，三次握手（Three-way Handshake，是指建立一个 TCP 连接时，需要用户端和服务器总共发送3个包）

  • 用户端发送一个 TCP 的 SYN 标志位置1的包，指明用户端打算连接的服务器的端口，以及初始序号 X,保存在包头的序列号(Sequence Number)字段里

  • 服务器发回确认包(ACK)应答

  • 用户端再次发送确认包(ACK)，SYN 标志位为0，ACK 标志位为1，并且把服务器发来 ACK 的序号字段+1，放在确定字段中发送给对方，并且在数据段放写ISN的+1

• 发送HTTP请求

• 服务器解决请求并返回 HTTP 报文

• 浏览器解析渲染页面

• 断开连接：TCP 四次挥手

  • 假设用户端想要关闭连接，用户端发送一个 FIN 标志位置为1的包，表示自己已经没有数据可以发送了，但是依然可以接受数据

  • 服务器端确认用户端的 FIN 包，发送一个确认包，表明自己接受到了用户端关闭连接的请求，但还没有准备好关闭连接

  • 服务器端准备好关闭连接时，向用户端发送结束连接请求，FIN 置为1。发送完毕后，服务器端进入 LAST_ACK 状态，等待来自用户端的最后一个ACK

  • 用户端接收到来自服务器端的关闭请求，发送一个确认包，并进入 TIME_WAIT状态，等待可能出现的要求重传的 ACK 包。服务器端接收到这个确认包之后，关闭连接，进入 CLOSED 状态

http与https的区别

1. https协议需要到ca申请证书，一般免费证书较少，需要付费
2. http是超文本传输协议，信息是明文传输，https则是具备安全性的ssl加密传输协议
3. http默认80端口，https默认443端口
4. http是无状态连接；https协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，安全性更高

缓存 SessionStorage，localStorage，Cookie

存储方式

• cookie会数据始终在同源http请求中携带，在浏览器和服务器之间来回传递
• sessionStroage和localStroage仅保存在本地

存储大小

• 单个cookie不能超过4K，很多浏览器都限制一个站点最多保存20个Cookie
• sessionStroage和localStroage可以达到5M

过期时间

• 只在设置的cookie过期时间之前有效，即便窗口关闭或者浏览器关闭
• sessionStorage,仅在当前浏览器窗口关闭之前有效
• localStorage：始终有效，窗口或者浏览器关闭也一直保存，本地存储，因而用作持久数据

作用域

• cookie和localStorage: 在所有同源窗口中都是共享的.只需浏览器不关闭，数据依然存在
• sessionStorage：打开多个相同的URL的Tabs页面，会创立各自的sessionStorage；关闭对应浏览器tab，会清理对应的sessionStorage