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的插件。