寫在開頭

說說我對webpack的看法，如有大佬，請多指正

眾所周知，在HTML文件中使用JavaScript只能通過script標簽來引入

如果你用這種方法，有什么問題嗎？如果以這種方式引入JavaScript，就不能大量引入JavaScript。有多少人？不多。加入一個頁面需要20個JavaScript文件。該怎么辦？必須添加20個腳本標簽，并逐一詢問。然而，第一頁會減慢速度。加載頁面后需要請求大量腳本。更重要的是，瀏覽器有一個請求限制。

由于瀏覽器只允許有一定數(shù)量的請求，大量的請求同時對瀏覽器造成了嚴重的性能問題。我在9102年使用了http/2。是的，大多數(shù)情況下都可以。name是一種特殊情況嗎？例如，airbnb和MS的outlook由3000多個模塊組成。

該怎么辦？我可以在同一個文件中編寫所有需要的JavaScript代碼嗎？是的，歷史的發(fā)展使得老程序員看到了一個包含10000行的巨大JavaScript文件。這種方法無疑解決了上述問題。但是這份文件是否解釋了這些缺點？我不與其他東西交談，但是如果你對我的特性有任何問題，我想調(diào)試它該怎么辦？我已經(jīng)在第一行定義了一個變量，但是到10000行去尋找它。那么他就是一個全局變量。你怎么玩？

然后理所當然的，前端朋友們就想出了一個辦法。是什么？Expresatery調(diào)用了函數(shù)表達式。中文立即執(zhí)行一個函數(shù)。

var outerScope = 1;const whatever = (function(dataWillUsedInside){    var outerScope = 0;    return {        someAttribute: 'youWantThis'    }})(0);// 1console.log(outerScope);

通過復制代碼，游戲規(guī)則變得簡單了。編寫大量的JS文件并將其封裝到IISI中并放入一個單獨的文件中。很好。一個問題已經(jīng)解決了。至少我們已經(jīng)解決了可變污染的問題。進入了工具時代。這時，每個人都開始尋工具 — make, grunt, gulp, broccoli...

一個新問題走，代表一個新的問題又來了。如果你想修改一個文件，那么你需要編譯所有的文件。包括他們我從未搬家。第二個問題，例如，想引用一個倉庫，但如果需要，你會引用它嗎？我不僅可以介紹一個腫塊。這有點嚇人。尤其是從當時的網(wǎng)絡狀況來看。它可能還需要提取一些倉庫。你要做的就是投入。此外，由于各種原因，在IIF中創(chuàng)建的文件會減慢頁面的加載速度。

JS的模塊化

然后，前端的學生又成功了。需要模塊化。Node實際上把V8帶到了服務器邊緣。問題來了。瀏覽器消失了。多姆走了。如何使用js？所以JS模塊的出現(xiàn)帶來了模塊化，帶來了commonjs。

// index.jsconst path = require('path');const [add, subtract] = require(''./math');/* * math.js (has two named exports [add, subtract]) */const divideFn = require('./division');exports.add = (first, second) => first + second;exports.subtract = (first, second) => first - second;exports.divide = divideFn;/* * dibision.js (has a exports 'divide') */module.exports = (first, second) => first / second;

一個簡單的synjjs代碼復制示例。有三個文件。它們可以一起引用?？梢允褂媚涿J導出。您可以按名稱導出它。然后它將以特定語法引入其他文件。所以到目前為止，我們已經(jīng)解決了問題領域。Ife不再是必要的。你現(xiàn)在不必擔心各種各樣的污染。我也解決了ife的缺陷。同時發(fā)布的NPM可以使用每個開發(fā)人員為每個人編寫的各種包。

然而，有一個問題。這在節(jié)點中，不支持瀏覽器。另外，如果您是編寫其他語言的程序員，您應該知道動態(tài)綁定，但是commjs不支持動態(tài)綁定。自述和流通引文層出不窮。而且，他的同步算法速度慢。還有一些有趣的事情可以解決這些問題。Browserify，需要JS，systeemjs。。。這些工具的用途很簡單。您可以在瀏覽器中使用CommonJS。但它們不支持靜態(tài)引入。換言之，只需要介紹使用哪個倉庫。此外，這并不意味著當所有人都在檔案中時使用commonjs，但AMD仍然存在。所以這個不能稱為“模塊系統(tǒng)”。

然后ES模塊出現(xiàn)了。據(jù)說1998年就可以看到相關文件。所以，這是間歇式設計20周年紀念日。但是他的語法變得更友好了。至少它不像云里霧里一樣的詞。

import {uniq, forOf, bar} from 'lodash-es';import * as utils from 'utils';export const uniqConst = uniq([1, 2, 3, 4]);

代碼副本現(xiàn)在似乎有了完美的模塊系統(tǒng)。重用和包的基本特性似乎很好。但是出現(xiàn)了一些問題。在節(jié)點中使用似乎很困難。這是許多團隊現(xiàn)在的工作方向。當它直接在瀏覽器中使用時，它會變得非常慢。認為它被放在網(wǎng)站上是可以的。10個模塊可以達到這個效果。當你從瀏覽器的頂部到底部讀取這個JS文件時，首先會遇到導入，然后查找這個包，找到相關的路徑，驗證它還不可用，然后讀取這個文件并重復這個步驟。請注意，這是在運行時完成的，即加載主頁時完成的。

webpack橫空出世

前面說過，但是NPM可以使用不同的模塊格式。不能說哪個錯了，不能用。所以你需要用不同的方式面對不同的方式。你只需要在JS上下功夫。請記住，web應用程序和CSS中仍然存在一些靜態(tài)資源。我們所需要的是一個“系統(tǒng)”或工具，它支持所有模塊格式并支持非JS文件。

webpack是什么？

webpack is a module bundler lets you write any module format(mixed also), compiles then for the browser. And it supports static async bundling.

有一個簡單而有力的定義。我已經(jīng)解決了上面的問題。你是怎么創(chuàng)造出來的？這是一個有趣的插曲。

2012年，德國人托拜厄斯讀到紐伯格的一位碩士寫了一篇論文。他以前寫過CXI，但從未編寫過web界面。他需要在某些特定場景中使用googlewebtoolkit中的代碼拆分功能。他的論文需要編寫一個網(wǎng)絡應用程序。他想找一個包含此功能的庫。他發(fā)現(xiàn)的這個倉庫叫做webmake。這也是bundler。但是，他提交的問題是因為沒有代碼分割功能。我寫代碼來實現(xiàn)這個功能。經(jīng)過短暫的爭論，維護者拒絕了他，在同意之后，他過去來到這個倉庫叉，并將這個特性添加到自己身上，并將新包命名為webpack。

2014年，丹·阿布拉莫夫（Dan Abramov）在庫存過剩時詢問了熱模塊更換單元的情況。托拜厄斯向他介紹了一種仍在開發(fā)的大幅面紙張。我已經(jīng)解釋了這個功能在webpack中的工作原理。這個功能有多棒，你可以不用刷新瀏覽器了！

2015年，在instagram工作的皮特·亨特（Pete hunt）向全世界講述了他們是如何利用網(wǎng)頁包來發(fā)布其innovapps的。然后我知道了。甚至像Facebook這樣的公司也開始使用webpack。但事實上，托比亞斯一周要在網(wǎng)頁包里呆5個小時。

要想在現(xiàn)在的浪尖下安然存活，熟悉自己的項目是必要的，學習接納新東西也是不可或缺的，不然就只能被時代前進的車輪滾滾壓在腳下，畢竟和之前不一樣，高鐵都提速了，何況互聯(lián)網(wǎng)乎？

寫在最后

在真正的認識了幾個大企業(yè)的大佬后，認真地和他們學習了很多經(jīng)驗以及獲取了很多直觀的資料，現(xiàn)在全部拿出來奉獻給大家！

重點

在真正的認識了幾個大企業(yè)的大佬后，認真地和他們學習了很多經(jīng)驗以及獲取了很多直觀的資料，現(xiàn)在全部拿出來奉獻給大家！

獲取方式
添加劉三歲Q群：【1038130565】（掃碼，群文件獲?。?/strong>
添加本人Q：【2477767446】
祝大家學有所成，成就更好的自己