『壹』 【Web前端基礎】webpack打包原理是什麼
【Web前端基礎】webpack打包原理是什麼？1、概念
本質上，webpack 基於node平台，利用 node 的各種api來實現 javascript 應用程序的一個靜態模塊的打包工具。
在打包過程中，構建依賴關系，並且實現模塊引用預處理，以及緩存等。
2、分析
1、人口文件
// mian.js
const a = require('./m1')
const b= require('./m2')
import { test } from './m1'
console.log(test)
//m2.js
export default {
b:2
}
//m1.js
export const test = {test:1}
export default {
a:1
}
2、生產的文件
(function (moles) {
var installedMoles = {}; //緩存
/*
* 載入模塊函數
* 傳入模塊id
* */
function __webpack_require__(moleId) {
// 檢查緩存中是否有模塊
if (installedMoles[moleId]) {
return installedMoles[moleId].exports;
}
// 創建一個新模塊，並緩存起來
var mole = installedMoles[moleId] = {
i: moleId,
l: false,
exports: {}
};
// 調模塊的函數，moles
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
mole.l = true;
// 返回對應模塊
return mole.exports;
}
__webpack_require__.m = moles;
__webpack_require__.c = installedMoles;
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
__webpack_require__.n = function (mole) {
var getter = mole && mole.__esMole ?
function getDefault() {
return mole['default'];
} :
function getMoleExports() {
return mole;
};
__webpack_require__.d(getter, 'a', getter);
return getter;
};
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
__webpack_require__.p = "";
// 載入入口文件
return __webpack_require__(__webpack_require__.s = 0);
})
([
(function (mole, exports, __webpack_require__) {
const a = __webpack_require__(1)
const b = __webpack_require__(2)
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
a: 1
});
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
b: 2
});
})
]);
觀察以上代碼得到結果：
1、打包後的代碼是一個立即執行函數，且傳入的參數為一個數組
2、參數數組就是我們引用的模塊
3、每一個模塊對應著數組的位置就是那麼的id
4、在立即函數中載入入口文件，並執行
__webpack_require__ ： 載入並執行某一個模塊並將模塊緩存在 installedMoles 中。
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
這里是執行引用的某一個模塊。
並將mole，exports，require 加入模塊中。
這也是為什麼我們在模塊中有全局變數 mole/exports/require
通過對打包後的文件分析，基本可以完全理解打包過程。
『貳』 前端項目打包部署
通過vue-cli和webpack構建的項目體積一般都較大，在生產環境下，需要進行打包部署。
1.准備
2.打包
3.部署
一閃而過
輸入 http://localhost/dist ，可以看到項目運行結果
『叄』 為什麼要構建前端自動化工作流
為了避免開發過程中有大量重復性工作
『肆』 前端構建工具和打包工具有啥區別
Webpack是一個前端模塊化方案，更側重模塊打包。我們可以把開發中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（載入器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。
Webpack就是需要通過其配置文件（Webpack.config.js）中 entry 配置的一個入口文件（JS文件），然後在解析過程中，發現其他的模塊，如scss等文件，再調用配置的loader或者插件對相關文件進行解析處理。
兩者區別
雖然Gulp 和 Webpack都是前端自動化構建工具，但看2者的定位就知道不是對等的。Gulp嚴格上講，模塊化不是他強調的東西，旨在規范前端開發流程。Webpack更明顯的強調模塊化開發，而那些文件壓縮合並、預處理等功能，不過是他附帶的功能。
以上就是介紹的前端構建工具 Gulp 和 Webpack，以及兩者之間的區別。如今互聯網發展迅速，Web前端人員也應該與時俱進的不斷學習。
『伍』 前端框架有什麼用
web前端框架是做什麼的？ 5分
前端框架一般指用於簡化網頁設計的框架，比如，jquery，extjs，bootstrap等等，這些框架封裝了一些功能，比如html文檔操作，漂亮的各種控制項（按鈕，表單等等）。
使用前段框架可以降低界面開發周期和提高界面的美觀性。
有些框架比較輕量，比如jquery，有些框架比較重量，比如extjs。一般來說重量的框架會封裝更多的功能，比如extjs，封裝的grid控制項有很強的數據展示和操作功能。
前端框架是什麼？有什麼用、有什麼好處？
可以簡單的理解成是：使用廣泛的前端開發套件，可以幫助你快速的網站。
前段框架的好處：對於互聯網的產品而言，前端用戶體驗往往決定了一款產品的競爭力和吸引力;而對於前端工程師來說，考慮的問題更為復雜，他們既要為網站上提供的產品和服務實現一流的Web頁面、優化代碼，保證體驗的最佳，更要考慮與市面上各大瀏覽器的兼容性，還需顧及Web前端表現層和前後端交互的架構，以及模塊化、通用類庫、框架編寫等一系列問題，由此提升前端開發的效率，降低開發成本和周期。
html的框架到底是用來幹嘛的？什麼時候用到？
你接觸了後台就知道了，這樣可以做到頁面地址不需要變動， 但卻可以利用iframe的tagert屬性把顯示數據的頁麵包含進來， div就不行，因為它沒有這個target屬性，文件獨立出來方便重用，且結構清晰；
前端開發框架有哪些
首先我想說明一下，我們通常說的js不是框架，是語言，即javascript，據最新世界編程語言排行榜來看，已經上升到了第7位，發展迅猛，其標準是ECMAScript，現在基本上是基於ECMAScript5。jQuery是用js寫的框架，其在DOM操作上有很明顯的優勢，也是時下很常用的一個js框架。
至於之外還要學習那些框架呢？
如果你說的是js框架，建議先掌握好jQuery，然後還有很多的，比如樓上提到的extjs，近幾年比較流行的AngularJS，基於移動端考慮的輕量級仿jquery框架zepto，還有jquery mobile，還有適合寫後端或服務端的node，等等。如果是web前端框架，就不僅僅是涉及的js了，還有html和css。個人覺得只有這三種語言都涉及到的框架才能說得上是web前端框架。現在比較火的是Bootstrap，還有Foundation，比較古老的有jqueryUI，easyUI等等，還有其他很多很多。如果還有算上處理方案及版本升級代碼迭代等，就要用到網路團隊研發的fis這種了。其實內容真的很多很多，前端任重而道遠啊~
web前端框架是什麼意思 10分
前端架構師必須懂得真正的編程知識，而這正是很多自封為前端架構師的人所缺乏的。我的意思不是能夠剪切粘貼改進代碼就行了，而是能夠跟老練的工程師商討如何能夠最好地結合前端。
這就是說，前端架構師需要真正理解結構遭遇商業邏輯的問題。如果工程師說某些東西使用ASP.Net DataGrid是不可能實現的，前端架構師必須能夠解釋如何與為何要使用DataList或Repeater取代，解釋為何DataGrid在該情景下是個錯誤的選擇……
這只是個例子，問題還在於僅知道客戶端編程也是不夠的。能夠使用與工程師相同的術語，能夠討論（前後端）關鍵集成的最佳解決方案，這是絕對必須的。
斷線的風箏
我們今天正處在一個不妙的處境中，原因在於幾乎沒有人能夠為前後端的溝壑搭橋。一般工程師不會有興趣或實踐標記，CSS, 或DOM腳本編程，大部分客戶端開發者也沒有與後端技術協作的經驗。幾周入門PHP不會成為程序員，幾周入門XHTML也不會成為真正的客戶端開發者。
罪魁禍首
我首先想到的十足例子是，ASP.Net完全漠視Web標准，同樣地，web氛圍（我們指表格和佔位gif）讓Web標准郁悶。企業項目的大多數框架輸出的標記，即使使用1999年的標准來衡量，都是糟糕無比的。
如此巨大和「專業」的產品怎麼能才夠不忽視，按理說是整個項目最簡單的方面？只有靜態代碼。理由是，基於技術的立場衡量產品，結構，CSS和其他客戶端技術都是「事後諸葛亮」。表現邏輯，結構和行為混雜，壓根無助於無障礙，Web標准，或者前端技術干凈的分離。擡起你的頭來，就在2006，這些都成受歡迎的慣例了。
總結
如果這個世界上姿態最鮮明的產品和項目都如此低劣的方式來處理事情，其他的還有什麼好說？毫無疑問，我們需要前端架構師，而且就在昨天。
歸結於歸結，我們有一堆相互關聯的技術，很少人能夠埋頭鑽研它們之間的關系，這很不幸。正確做事的真正價值在於容易的維護和長期的適應性。雖然在關鍵時刻，有些方式更容易選擇其他的方法和拼湊起另外的東西。對某些人來說，這可能是可接受的做事方式。但是，對我們大部分人來說，這是拙劣的抉擇，也非常不專業。
我交給你去想了。我假設你把車交給技工修理，修好了時候，瞧瞧引擎罩內大量的輸送管，我不知道你對技工作何感想？
為什麼需要自己實現前端框架
前端對框架(庫)的大小更敏感
前端內容的渲染和交互效果的實現如果依賴JS框架(庫)，需要先將這些框架(庫)下載到客戶端，此時框架(庫)的大小將直接影響到前端的首屏渲染速度。框架(庫)越小，載入的速度就越快，而隨著功能的越來越全，框架(庫)必然會越來越大，要保證性能，需要制定載入策略。
便於制定載入策略
解決框架(庫)變大的常見載入策略是將框架分為核心部分和擴展部分，核心部分在首屏渲染前必須下載完成，並且這部分的載入文件盡可能的少和小，擴展部分則可以模塊化方式來懶載入。
核心部分的JS在發布時，可對文件合並，數量盡可能少，單個文件在gzip壓縮後最好不要超過20K。核心部分可以是實現「JS語言擴展(面向對象)，DOM操作API，數據交互方法(ajax)，導航策略，模塊化底層實現，事件底層實現，模版解析」等。擴展部分一般是一些可非同步載入的UI組件，例如：輸入控制項、彈出窗、動畫API、文件上傳及預覽、圖表控制項、富文本編輯器等。
上面的實現模式，在主流的JS框架(庫)中，有三類選擇：一類是以ExtJS為代表的大而全的框架(庫)，這類框架雖然功能滿足，但往往無法拆分為核心部分和擴展部分來載入，因此基本不予考慮；一類是相對輕量的YUI3、Dojo等框架(庫)；一類是近來流行的前端MV*系列Backbone、Ember、Angular，這類在充當核心部分時，還需要組合Underscore、RequireJS，jQuery等第三方庫。
後面兩類可以滿足要求，但個人覺得不是完美的方案，因為在開發實際產品時，將這兩類作為核心部分時，往往裡面有很多是不需要的，而還有些需要自己來額外補充近來，可以是自己開發，也可以集成第三方的實現。而核心部分框架(庫)如果是自己實現，則可以保證在功能完整的情況下，不多出其它的東西，載入的JS可以控制到最小，而且代碼風格也統一。
便於擴展
前端代碼與用戶的交互直接相關，而交互的設計變化和不確定性非常大，現成的第三方實現往往難以直接利用，需要改造。有時改造第三方的框架，先要非常熟悉框架，當這個框架比較復雜時，這樣的工作量和難度就大大加大了。而自實現的框架(庫)則可以根據需要任意擴展，可以根據需求制定對應的規范和API。
前端開發框架有哪些
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（button groups），導航面板（navigation control）——包括：tabs,pills,lists標簽，麵包屑導航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進度條（progress bars），媒體對象（media objects）等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tool tips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。
jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery Mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。
Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控制項。Fuel UI 安裝，修改，更新以及優化都很簡單方便。
StyleBootstrap. —— Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。
BootSwatchr —— 利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
Bootswatch —— 提供大量免費的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。
LayoutIt —— 通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，......
前端開發框架有哪些
1. Bootstrap Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。 Bootst...
前端框架用哪個好
1、flex
Apache基金會今天發布了Flex 4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本。
需要注意的是，Flex目前還在孵化階段，還不是Apache的正式項目，Flex 4.8也不是一個正式的Apache版本。
Apache稱，該版本標志著Flex新時代的開始，Flex的未來將由社區來驅動，而不是由一個公司驅動。開發者可以通過貢獻代碼，來幫助改進Flex，如修復bug、增加功能等。
從Macromedia賣給Adobe，然後又捐給apache，不知道搞什麼名堂。不過還好沒有經過大幅重構，否則就真的是悲哀了！
2、extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。
功能豐富，無人能出其右。
無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。
華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢！
3、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且界面做的還說的過去！
4、MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
jQuery MiniUI - 快速開發WebUI。
它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。
使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。
界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源！基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級！
5、jQuery UI
jQuery UI 是一套 jQuery 的頁面 UI 插件，包含很多種常用的頁面空間，例如 Tabs（如本站首頁右上角部分） 、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。
功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！
6、DWZ
DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。
畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下！不過性能怎麼樣不敢確定！
7、GWT
Google 網頁工具包——GWT 提供了一組基於Java語言的開發包，這個開發包的設計參考Java AWT包設計，類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉Java AWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。
你不用......
web前端開發框架有哪些
bootstrap是twitter出的一款不錯的UI框架，或者與其說是框架不如說是類庫（lib），當然這里邊牽扯到一個「究竟什麼是框架什麼是類庫？」的問題，我們暫時不談。畢竟是有大公司背景的代碼堆，我覺得沒什麼「落伍」可言。
angular是前兩年之內突然火得一塌糊塗的一個fe框架，這個我覺得可以算的上是真正意義上的框架了，MVVM雙向綁定，包括它擁有足夠完善的社區、生態，甚至chrome上都有很多好用的相關插件（這一點可以說是佔了google出品的光），比較完整的大型項目都是可以考慮引入的。但如果你的網站只是做一些輕量級的東西，殺雞焉用宰牛刀吧我覺得。
backbone主要針對的MVC中的M層，至少我是這么理解的。對UI層它幾乎沒什麼太多的限制，一方面給出了coder自由度進行發揮，另一方面也等於在這方面框架本身對開發沒提供什麼太大的幫助。我覺得這更像是一個高手向的框架，另外對於underscore前端模板那一套東西，說實話作為一名php java啥都能寫的FE我始終覺得這套東西有那麼一種純JS工程師的一廂情願的意味。這是個人看法了，不一定準確，況且有人會搬出ajax動態渲染時 前端模板的作用來反駁我，別急著反駁，至少往下看完我說的話。
相比之下，react可以說是一個在MVC中V層做的十分出色和新穎的框架了，獨特的jsx編譯機制就已經讓你的代碼變得高大上了，我是覺得這個類庫在UI層做的更徹底更專業，或者說讓FE的代碼更專業了。更何況，react比angular更年輕，而且同樣擁有大公司背景，react native一出更是讓JS工程師的地位取得了革命性的提升，（不要跟我提phonegap，用過兩個東西後你會明白，react打包的app性能甩phonegap幾條街沒問題）。另外既然樓主提到了之前的網站是bootstrap，不妨可以看一看react-bootstrap這個東西，或許這就是你想要的。