node.js webpack grunt gulp進一步學習

時間 2019-11-13

標籤 node.js node webpack grunt gulp 進一步學習欄目 Node.js 简体版

原文原文鏈接

1.node.js
Node.js是一個基於 Chrome V8 引擎的 JavaScript 運行環境,Node.js是一個讓 JavaScript 運行在服務端的開發平臺。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,是單線程。javascript

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少一半左右。css

3.webpack
webpack與grunt,gulp的區別：
WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。
Gulp / Grunt 是一種工具，可以優化前端工做流程。好比自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來講，就是使用Gulp/Grunt，而後配置你須要的插件，就能夠把之前須要手工作的事情讓它幫你作了。Gulp/Grunt是一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優勢使得Webpack在不少場景下能夠替代Gulp/Grunt類的工具。html

他們的工做方式也有較大區別：
Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務。
Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。前端

webpack與grunt,gulp的區別簡潔版
webpack是一個模塊打包器，強調的是一個前端模塊化方案，更側重模塊打包，咱們能夠把開發中的全部資源都當作是模塊，經過loader和plugin對資源進行處理。
gulp是一個前端自動化構建工具，強調的是前端開發的工做流程，能夠經過配置一系列的task，第一task處理的事情（如代碼壓縮，合併，編譯以及瀏覽器實時更新等）。而後定義這些執行順序，來讓glup執行這些task，從而構建項目的整個開發流程。自動化構建工具並不能把全部的模塊打包到一塊兒，也不能構建不一樣模塊之間的依賴關係。vue

4.webpack打包原理
把全部依賴打包成一個 bundle.js 文件，經過代碼分割成單元片斷並按需加載。java

5.webpack的優點
（1）webpack 是以 commonJS 的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。
（2）能被模塊化的不只僅是 JS 了。
（3）開發便捷，能替代部分 grunt/gulp 的工做，好比打包、壓縮混淆、圖片轉base64等。
（4）擴展性強，插件機制完善node

6.什麼是loader，什麼是plugin
loader用於加載某些資源文件。由於webpack自己只能打包common.js規範的js文件，對於其餘資源如css，img等，是沒有辦法加載的，這時就須要對應的loader將資源轉化，從而進行加載.
plugin用於擴展webpack的功能。不一樣於loader，plugin的功能更加豐富，好比壓縮打包，優化，不僅侷限於資源的加載。webpack

7.什麼是bundle，什麼是chunk，什麼是module
bundle：是由webpack打包出來的文件
chunk：是指webpack在進行模塊依賴分析的時候，代碼分割出來的代碼塊
module：是開發中的單個模塊程序員

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

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