面試經常有問到 webpack，偶遇一篇比較有實用價值的且有利於理解的文章，現總結如下：
①、將 es6 轉換成 es5；
②、支援在 js 檔案中 import css 檔案；
下面我們跟隨這個工具的具體實現，來理解打包工具的原理，come on~
實現
接下來我們將這些工具引入檔案中：
接下來，我們先來實現如何使用 babel 轉換**：
①.首先我們傳入乙個檔案路徑引數，然後通過 fs 將檔案中的內容讀取出來；
②.接下來我們通過 babylon 解析**獲取 ast，目的是為了分析**中是否還引入了別的檔案；
③.通過 dependencies 來儲存檔案中的依賴，然後再將 ast 轉換為 es5 **
④.最後函式返回了乙個物件，物件中包含了當前檔案路徑、當前檔案依賴和當前檔案轉換後的**；
接下來我們需要實現乙個函式，這個函式的功能有以下幾點：
i、呼叫 readcode 函式，傳入入口檔案；
ii、分析入口檔案的依賴；
iii、識別 js 和 css 檔案；
i、首先我們讀取入口檔案，然後建立乙個陣列，該陣列的目的是儲存**中涉及到的所有檔案；
ii、接下來我們遍歷這個陣列，一開始這個陣列中只有入口檔案，在遍歷中，如果入口檔案有依賴其他的檔案，那麼就會被 push 到這個陣列中；
iii、在遍歷的過程中，我們先獲得該檔案對應的目錄，然後遍歷當前檔案的依賴關係；
iv、在遍歷當前檔案依賴關係的過程中，首先生成依賴檔案的絕對路徑，然後判斷當前檔案是 css 檔案還是 js 檔案
①.如果是css檔案的話，我們就不能用 babel 去編譯了，只需要讀取 css 檔案中的**，然後建立乙個 style 標籤，將**插入進標籤並且放入 head 中即可；
②.如果是js檔案的話，我們還需要分析js檔案是否還有別的依賴關係；
③.最後將讀取檔案後的物件 push 進陣列中；
now，我們已經獲取到了所有的依賴檔案，接下來就是實現打包的功能了：
這段**需要結合著 babel 轉換後的**來看，這樣大家就能理解為什麼需要這樣寫了
babel 將我們 es6的模組化**轉換為了 commonjs 的**，但是瀏覽器是不支援 commonjs 的，所以如果這段**需要在瀏覽器環境下執行的話，我們需要自己實現 commonjs 相關的**，這就是 bundle 函式做的大部分事情；
接下來我們再來逐行解析 bundle 函式
i、首先遍歷所有依賴檔案，構建出乙個函式引數物件；
ii、物件的屬性就是當前檔案的相對路徑，屬性值是乙個函式，函式體是當前檔案下的**，函式接受三個引數 module、exports、require；
①.module 引數對應 commonjs 中的 module；
②.exports 引數對應 commonjs 中的 module.export；
③.require 引數對應我們自己建立的 require 函式；
iii、接下來就是構造乙個使用引數的函式了，函式做的事情很簡單，就是內部建立乙個 require 函式，然後呼叫 require(entry)，也 就是 require('./entry.js')，這樣就會從函式引數中找到 ./entry.js 對應的函式並執行，最後將匯出的內容通過 module.export 的方式讓外部獲取到；
iv、最後再將打包出來的內容寫入到單獨的檔案中
綜上可知，打包工具的核心原理就是：
1、webpack是把專案當做乙個整體，通過給定的乙個主檔案，webpack將從這個檔案開始找到你的專案的所有依賴檔案；
2、然後使用 loaders 處理它們，最後打包成乙個或多個瀏覽器可識別的 js 檔案；
vcpkg VC 打包工具
原文 引用 vcpkg 是微軟 c 團隊開發的在 windows 上執行的 c c 專案包管理工具,可以幫助您在 windows 平台上獲取 c 和 c 庫.vcpkg 自身也是使用 c 開發的 而其他的 c 包管理大多並不是 c 開發的 並且 vcpkg 能夠幫助使用者在 visual studi...
前端打包工具
前端打包工具是一種將前端 進行轉換，壓縮以及合併等操作的程式工具。目前常見的有grunt，webpack等。它能將我們前端人員寫得less,sass等編譯成css.將多個js檔案合併壓縮成乙個js檔案。它的作用就是通過將 編譯 壓縮，合併等操作，來減少 體積，減少網路請求。以及方便在伺服器上執行。目...
打包工具分析
nsis是最好的免費打包工具，功能強大。暴風影音，ppstream,qq,搜狗拼音,flashget等知名軟體都是用它打包的，而且學習簡單，下幾個例子就會了，缺點和inno一樣，都是指令碼的，沒有方便的gui嚮導，其實第三方工具是有gui 生成器的 這個論壇有比較豐富的案例 inno和install...