淺談webpack

近期，咱們須要作前端項目的性能優化，因爲咱們的項目都是基於webpack構建，因此頗有必要帶領團隊深刻了解一下webpack。

本文做爲團隊內部培訓的前置自學資料，建議參加人員先了解一下當前最新穩定版本 webpack 4.x的平常使用，技術分享的效果會更好！

本文側重以問答形式，便於你們掌握webpack的核心概念，系統學習建議先簡單過一下中文官網，而後詳細看一下英文文檔！

由於當前咱們的項目以webpack3爲主，計劃逐步升級過分到webpack4，所以咱們分享時，重點深刻源碼，探尋webpack4與3的區別，並簡要介紹一下即將發佈的webpack5。

官方文檔

• 英文網 https://webpack.js.org/guides/
• 中文網 https://www.webpackjs.com/

什麼是webpack？

官方定義爲一個JS靜態模塊打包器，經過loader處理非 JS文件，經過plugins 來拓展功能。

本質上webpack是跑在nodejs環境一個工具合集，它的不少功能咱們不用其餘語言，直接linux使用shell腳本也能夠實現，只是效率低一些。

能夠說，是webpack 帶火了nodejs，由於現代的前端主流框架基本都基於它構建。

webpack的loader有什麼做用？

在 import 或"加載"模塊時對模塊的源代碼進行轉換，相似於其餘構建工具中「任務(task)」，如可使用 loader 告訴 webpack 加載 CSS 文件，或者將 TypeScript 轉爲 JavaScript。

webpack的plugins有什麼做用？

webpack的核心是一個編譯器，而插件則用於執行編譯過程當中某些特定的功能，經過 plugin 能夠解決 loader 解決不了的問題，如打包優化和壓縮等，功能極其強大，能夠用來處理各類各樣的任務。

webpack 插件是一個具備 apply 屬性的 JavaScript 對象。apply 屬性會被 webpack compiler 調用，而且 compiler 對象可在整個編譯生命週期訪問。

webpack 插件有什麼特色？

• 獨立的 JS 模塊，暴露相應的函數
• 函數原型上的 apply 方法會注入 compiler 對象
• compiler 對象上掛載了相應的 webpack 事件鉤子
• 事件鉤子的回調函數裏能拿到編譯後的 compilation 對象，若是是異步鉤子還能拿到相應的 callback

webpack4與3的區別？

webpack3配置靈活多變，很差控制，使得學習、使用、研究webpack的成本太高（進階曲線太陡），構建一個小應用也須要像構建大應用那樣配置 webpack.config.js。

所以，webpackk4和3最大的區別就是，能夠不使用 webpack.config.js 配置文件，增長了不少默認配置項，針對不瞭解webpack的人員或小應用開發的場景，這樣作無異省時省力。

webpackk4在沒有 webpack.config.js 的狀況下，咱們能夠在命令行中添加入口/出口配置項。

可是原來 webpack.config.js 配置文件中的 module 和 plugins 配置項中的功能實現仍是須要使用 webpack.config.js。

總結以下：

• webpack增長了一個mode配置，只有兩種值development | production；
• 默認生產環境開起了不少代碼優化；
• 生產環境不支持watching，開發環境優化了打包的速度；
• 生產環境開啓模塊串聯（原ModulecondatenationPlugin）；
• 自動設置process.env.NODE_EVN到不一樣環境，也就是不使用DefinePlugin了；
• 刪除CommonsChunkPlugin，改爲使用optimization.splitChunks進行模塊劃；
• 只須要使用optimization.minimize爲true進行壓縮，再也不須要引入UglifyJsPlugin；

webpack 5有哪些新特性？

官方描述：

• 使用持久化緩存提升構建性能；
• 使用更好的算法和默認值改進長期緩存（long-term caching）；
• 清理內部結構而不引入任何破壞性的變化；
• 引入一些breaking changes，以便儘量長的使用v5版本。

通俗版描述：

• 減少打包後的文件體積
• 按需加載支持文件名模式
• 使用long-term caching解決生產環境下moduleIds & chunkIds變化的問題
• 使用cache: {type: "filesystem"}配置實現持久化緩存，提升構建速度
• 優化minSize&maxSize的配置方式
• Node.js polyfills 自動加載功能被移除