node.js webpack grunt gulp进一步学习

1.node.js
Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境,Node.js是一个让 JavaScript 运行在服务端的开发平台。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,是单线程。

2.grunt gulp
Gulp / Grunt基于node.js的前端开发过程中对代码进行构建的工具。是一种能够优化前端工作流程的工具。
用处：文件合并，资源压缩，代码检查等功能（可自动添加vendor前缀//HTML引用JavaScript或者CSS文件，版本升级不用手工修改）。
优点：不仅对网站资源进行优化，开发过程中很多重复任务可以正确使用工具自动完成
对于程序员：专注编写代码功能实现，提高工作效率。
gulp与grunt的区别：
grunt 运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，导致认知成本的提高，运用的时候要搞懂各种插件的配置规则。
gulp 是用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch 接口,运用相当简单。经尝试，使用gulp的代码量能比grunt少一半左右。

3.webpack
webpack与grunt,gulp的区别：
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

他们的工作方式也有较大区别：
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

webpack与grunt,gulp的区别简洁版
webpack是一个模块打包器，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。
gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，可以通过配置一系列的task，第一task处理的事情（如代码压缩，合并，编译以及浏览器实时更新等）。然后定义这些执行顺序，来让glup执行这些task，从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起，也不能构建不同模块之间的依赖关系。

4.webpack打包原理
把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。

5.webpack的优势
（1）webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
（2）能被模块化的不仅仅是 JS 了。
（3）开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
（4）扩展性强，插件机制完善

6.什么是loader，什么是plugin
loader用于加载某些资源文件。因为webpack本身只能打包common.js规范的js文件，对于其他资源如css，img等，是没有办法加载的，这时就需要对应的loader将资源转化，从而进行加载.
plugin用于扩展webpack的功能。不同于loader，plugin的功能更加丰富，比如压缩打包，优化，不只局限于资源的加载。

7.什么是bundle，什么是chunk，什么是module
bundle：是由webpack打包出来的文件
chunk：是指webpack在进行模块依赖分析的时候，代码分割出来的代码块
module：是开发中的单个模块

8.如何自动生成webpack配置文件？
webpack-cli/vue-vli

9.什么是模热更新？有什么优点？
修改代码后不用刷新，自动刷新浏览器。
优点：节省开发时间，调整样式更快速。

10.webpack-dev-server 和 http服务器的区别
webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统的http服务对开发更加有效。

11.什么是长缓存？在webpack中如何做到长缓存优化？
浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。
在webpack中，可以在output给出输出的文件制定chunkhash，并且分离经常更新的代码和框架代码，通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。

12.什么是Tree-sharking?
tree-sharking 是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。

补充：
1.webpack是什么？解决了什么问题？常用的特性与功能？优点，特点？
（1）WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
Webpack是一个强大的模块化打包和构建工具，不仅能对JS进行打包，而且还能通过加载器对CSS 、image 、font 进行打包，引用时直接当作模块来引用，最后统一打包成一个bundle.js文件来输出；同时Webpack还支持插件功能，其各种插件大大丰富了webpack的功能，如最常见的html-webpack-plugin插件，能由写好的模版在编译后直接生成所需要的html页面，方便维护、扩展和部署上线。此外，Webpack还能对css进行预处理, 如使用postcss－loader中的autoprefixer 、pxtorem等功能实现CSS免前缀 ，px自动转换为rem；使用less-loader 、scss-loader直接引用less、scss文件；使用css-loader中的css modules实现CSS样式的局部与全局编写，并用hash值来进行样式命名，让你在编写代码时再也不用为命名而发愁了。。。总之，Webpack给人以无所不能的感觉，但是上手麻烦，配置项看起来让新手一脸懵逼，远不如gulp小而灵巧，应该也算是它的一个弊端吧！
（2）今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
a:模块化，让我们可以把复杂的程序细化为小的文件;
b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
c:scss，less等CSS预处理器
…
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
（3）常用特性与功能：plugins 与 loader

（4）特点
代码拆分（支持异步模块加载）：Webpack 有两种组织模块依赖的方式，同步(默认)和异步（高级）。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Loader（支持任意模块加载，比如图片、less、css等等）：Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
智能解析：Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + “.jade”)。
插件系统：Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
快速运行：Webpack 使用异步 I/O （NodeJs）和多级“缓存”提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。
2.webpack中的pluggin和loader，用过哪些pluggin,用过哪些loader
3.gulp与webpack，grunt在项目中的具体使用，以及区别
4.webpack的使用/ webpack的工作原理
5.webpack打包原理和流程，打包后文件还是很大，打包后的文件如何拆包？
6.webpack配置问题。
7.webpack刷新原理(热更新原理)
其他问题
1.websocket相关，与http区别？
http协议是用在应用层的协议，他是基于tcp协议的，http协议建立链接也必须要有三次握手才能发送信息。

http链接分为短链接，长链接，短链接是每次请求都要三次握手才能发送自己的信息。即每一个request对应一个response。长链接是在一定的期限内保持链接。保持TCP连接不断开。客户端与服务器通信，必须要有客户端发起然后服务器返回结果。客户端是主动的，服务器是被动的。

WebSocket是为了解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮训问题而生的，他实现了多路复用，他是全双工通信。在webSocket协议下客服端和浏览器可以同时发送信息。

建立了WebSocket之后服务器不必在浏览器发送request请求之后才能发送信息到浏览器。这时的服务器已有主动权想什么时候发就可以发送信息到服务器。而且信息当中不必在带有head的部分信息了与http的长链接通信来说，这种方式，不仅能降低服务器的压力。而且信息当中也减少了部分多余的信息。

HTTP的长连接与websocket的持久连接
HTTP1.1的连接默认使用长连接（persistent connection），
即在一定的期限内保持链接，客户端会需要在短时间内向服务端请求大量的资源，保持TCP连接不断开。客户端与服务器通信，必须要有客户端发起然后服务器返回结果。客户端是主动的，服务器是被动的。

在一个TCP连接上可以传输多个Request/Response消息对，所以本质上还是Request/Response消息对，仍然会造成资源的浪费、实时性不强等问题。

如果不是持续连接，即短连接，那么每个资源都要建立一个新的连接，HTTP底层使用的是TCP，那么每次都要使用三次握手建立TCP连接，即每一个request对应一个response，将造成极大的资源浪费。

长轮询，即客户端发送一个超时时间很长的Request，服务器hold住这个连接，在有新数据到达时返回Response

websocket的持久连接

只需建立一次Request/Response消息对，之后都是TCP连接，避免了需要多次建立Request/Response消息对而产生的冗余头部信息。
2.webpack本地开发怎么解决跨域的
webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题
webpack 配置

proxy:  {
      '/api/*': {
        target: 'http://localhost:8888/', // 目标服务器地址
        secure: false, // 目标服务器地址是否是安全协议
        changeOrigin: true, // 是否修改来源, 为true时会让目标服务器以为是webpack-dev-server发出的请求!
        // '/api/login' =>    target + '/login'
        pathRewrite: {'^/api': '/'} // 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
      }
  }

我当前服务为 http://localhost:8080/

 fetch('/api/data').then(res => {
      // http://localhost:8888/data 实际访问地址
      console.log(res)
    })

3.webpack中babel的实现
（1）首先安装babel-loader、babel-core、babel-preset-env
首先，babel-loader作为webpack的loader的一种，作用同其他loader一样，实现对特定文件类型的处理。
虽然webpack本身就能够处理.js文件，但无法对ES2015+的语法进行转换，babel-loader的作用正是实现对使用了ES2015+语法的.js文件进行处理。
第二，babel-core的作用在于提供一系列api。这便是说，当webpack使用babel-loader处理文件时，babel-loader实际上调用了babel-core的api，因此也必须安装babel-core：
第三，babel-preset-env的作用是告诉babel使用哪种转码规则进行文件处理。
（2）配置webpack.config.js

module:{
        rules:[
            {
                test:/\.js$/,       //匹配文件夹中后缀名是 .js的文件（注意这里不能加 引号）
                exclude:/node_modules/, //排除 node_modules 中的js文件（注意这里不能加引号）
                loader:"babel-loader"            //对匹配的 js文件用 babel来编译
            }
        ]
    }

(3)配置
第一种方式是通过package.json。

"babel":{
  "presets": [],
  "plugins": []
}

插件属性设置为
"babel":{
  "presets": ["env"]
}

第二种方式：
即通过.babelrc文件，在项目根目录下新建.babelrc文件，里面只需输入第一种方式中”babel”属性的值即可：

{
  "presets": ["env"]
}

4.webpack的优化
5.Webpack 怎么提取公共模块
6.Webpack 常用的插件？
再一次补充
有关node.js知识：https://www.cnblogs.com/zyrblog/p/7545868.html
https://www.zhihu.com/question/33578075
使用node.js搭建服务器：https://www.cnblogs.com/onepixel/p/5327594.html
grunt: https://www.cnblogs.com/RachelChen/p/6606001.html
gulp：https://blog.csdn.net/heshuaicsdn/article/details/78926401
https://blog.csdn.net/xllily_11/article/details/51320002
gulp与·grunt的区别：https://blog.csdn.net/u011413061/article/details/48834967
gulp与webpack的区别：https://blog.csdn.net/xllily_11/article/details/51782005
gulp与grunt与webpack的区别： https://blog.csdn.net/qq_36671474/article/details/82227369
webpack入门以及配置：https://blog.csdn.net/solar_lan/article/details/82751165
对webpack的理解：https://www.cnblogs.com/-walker/p/6056529.html
有关webpack的面试题：https://www.zhihu.com/question/266788138

///////////////////////////////////////////////分割线二//////////////////////////////////////////////////////////////////////////////
js与css依赖问题
性能优化：文件合并，文件压缩
可以自动给我添加CSS的Vendor前缀
构建工具自动跑一遍我们的单元测试
代码分析
HTML引用JavaScript或者CSS文件
比如我们需要使用Bower之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话，第一比较耗时，第二比较容易疏漏，尤其是在我们需要切换Debug和production版本时将会有很多额外的工作，那么使用前端构建工具可以很好的解决这些问题。
grunt:
确定如何根据需求、功能划分模块，如何将代码分成多个文件开发，合成一个发布
保证上一条的同时，使用 Coffeescript、SCSS/LESS 等技术
保证上2条的同时，想想怎么在浏览器的刷新后一切都最新
保证上3条的同时，想想怎么在开发、测试、生产、预发布环境中都OK
保证上4条的同时，进行TDD式的开发
…这还是js, 我们还没有涉及到HTML
Grunt 可以将创建小宇宙的工作变得轻松很多。
///////////////////////////////////////////////分割线三//////////////////////////////////////////////////////////////////////////////
gulp:Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。
使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
///////////////////////////////////////////////分割线四//////////////////////////////////////////////////////////////////////////////
gulp与grunt的区别：
易用 Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
高质量 Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
易学 Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。
流 使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。
代码优于配置 维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别
///////////////////////////////////////////////分割线五//////////////////////////////////////////////////////////////////////////////
gulp与webpack的区别：
gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
1.构建工具
2.自动化
3.提高效率用
webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
1.打包工具
2.模块化识别
3.编译模块代码方案
///////////////////////////////////////////////分割线六//////////////////////////////////////////////////////////////////////////////
gulp与grunt，webpack区别
Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。

说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。

seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。