資訊專欄INFORMATION COLUMN
摘要：當下最流行的模塊打包器于年月日正式發布版本，代號。從官方的發布日志來看本次大版本更新帶來了很多新特性更新和改善，這將會讓的配置更加簡單。本文，筆者將會全面介紹的新特性及實踐。只支持模塊，目前處于試驗階段。
導語: webpack是一個JS應用打包器, 它將應用中的各個模塊打成一個或者多個bundle文件。借助loaders和plugins，它可以改變、壓縮和優化各種各樣的文件。它的輸入是不同的資源，比如：js、css、圖片、字體和html文件等等，然后將它們輸出成瀏覽器可以正常解析的文件。
當下最流行的模塊打包器 webpack 于2018年2月25日正式發布v4.0.0版本，代號legato。從官方的 發布日志 來看, 本次大版本更新帶來了很多新特性更新和改善，這將會讓webpack的配置更加簡單。本文，筆者將會全面介紹webpack4的新特性及實踐。
環境支持在發布日志里的 Big changes 板塊，官方宣布不在支持Node 4, Node 6 使用的是v8 5.0版本，支持93%的ES6語法。不難看出，這個決定是為了更好的利用ES6語法的優勢，來編寫出更加整潔和健壯的代碼。
備注：當使用webpack4時，確保使用 Node.js的版本 >= 8.9.4。因為webpack4使用了很多JS新的語法，它們在新版本的 v8 里經過了優化。mode 屬性
另一個大的改變是webpack需要設置mode屬性，可以是 development 或 production。
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
通過mode, 你可以輕松設置打包環境。如果你將 mode 設置成 development，你將獲得最好的開發階段體驗。這得益于webpack針對開發模式提供的特性：
瀏覽器調試工具
注釋、開發階段的詳細錯誤日志和提示
快速和優化的增量構建機制
如果你將mode設置成了 production, webpack將會專注項目的部署，包括以下特性：
開啟所有的優化代碼
更小的bundle大小
去除掉只在開發階段運行的代碼
Scope hoisting和Tree-shaking
插件和優化webpack4刪除了CommonsChunkPlugin插件，它使用內置API optimization.splitChunks 和 optimization.runtimeChunk ，這意味著webpack會默認為你生成共享的代碼塊。其它插件變化如下:
NoEmitOnErrorsPlugin 廢棄，使用optimization.noEmitOnErrors替代，在生產環境中默認開啟該插件。
ModuleConcatenationPlugin 廢棄，使用optimization.concatenateModules替代，在生產環境默認開啟該插件。
NamedModulesPlugin 廢棄，使用optimization.namedModules替代，在生產環境默認開啟。
uglifyjs-webpack-plugin升級到了v1.0版本, 默認開啟緩存和并行功能。
開箱即用WebAssemblyWebAssembly(wasm)會帶來運行時性能的大幅度提升，由于在社區的熱度，webpack4對它做了開箱即用的支持。你可以直接對本地的wasm模塊進行import或者export操作，也可以通過編寫loaders來直接import C++、C或者Rust。
支持多種模塊類型webpack4支持5種模塊類型：
javascript/auto: 在webpack3里，默認開啟對所有模塊系統的支持，包括CommonJS、AMD、ESM。
javascript/esm: 只支持ESM這種靜態模塊。
javascript/dynamic: 只支持CommonJS和AMD這種動態模塊。
json: 只支持JSON數據，可以通過require和import來使用。
webassembly/experimental: 只支持wasm模塊，目前處于試驗階段。
0CJS0CJS的含義是0配置，webpack4受Parcel打包工具啟發，盡可能的讓開發者運行項目的成本變低。為了做到0配置，webpack4不再強制需要 webpack.config.js 作為打包的入口配置文件了，它默認的入口為"./src/"和默認出口"./dist"，這無疑對小項目而言是福音。
你所需要做的是在你的項目里包含 ./src/index.js 文件。當在命令行里執行 webpack 命令時，webpack會將該文件作為項目的入口文件進行打包配置。
新的插件系統webpack4對插件系統進行了不少修改，提供了針對插件和鉤子的新API。變化如下：
所有的hook由 hooks 對象統一管理，它將所有的hook作為可擴展的類屬性。
當添加插件時，必須提供一個插件名稱。
開發插件時，可以選擇sync/callback/promise作為插件類型。
可以通過this.hooks = { myHook: new SyncHook(...) } 來注冊hook了。
更多關于新插件的工作原理可以參考: 新的插件系統是如何工作的？
Webpack5展望已經有不少關于webpack5的計劃正在進行中了，包括以下：
對WebAssembly的支持更加穩定
支持開發者自定義模塊類型
去除ExtractTextWebpackPlugig插件，支持開箱即用的CSS模塊類型
支持Html模塊類型
持久化緩存
最后騰訊IVWEB團隊的工程化解決方案feflow已經開源：Github主頁：https://github.com/feflow/feflow
如果對您的團隊或者項目有幫助，請給個Star支持一下哈～
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93672.html
摘要：介紹背景最近和部門老大，一起在研究團隊前端新手村的建設，目的在于幫助新人快速了解和融入公司團隊，幫助零基礎新人學習和入門前端開發并且達到公司業務開發水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介紹 1. 背景 最近和部門老大，一起在研究團隊【EFT - 前端新手村】的建設...
摘要：今天就嘗試著一起來聊聊吧，旨在幫大家加深理解新手更容易上路，都能從到搭建配置自定屬于自己的腳手架，或對已封裝好的腳手架有進一步的鞏固，接下來蘇南會詳細講解中的每一個配置字段的作用部分為新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言 經常會有群友問起webpack、react、redux、甚至cre...
摘要：靜態類型系統能幫助你有效防止許多潛在的運行時錯誤，而且隨著你的應用日漸豐滿會更加顯著。選擇，會生成符合規范的文件，使用，會生成滿足規范的文件，使用會生成使用的的代碼。使用或者是會生產包含特性的代碼。 showImg(https://segmentfault.com/img/bVbbhsr?w=800&h=800); 靜態類型系統能幫助你有效防止許多潛在的運行時錯誤，而且隨著你的應用日漸...
摘要：前段時間又發布了新版本我接觸的時候已經版本了支持的版本必須打包速度大小比較以及粗淺的試了一下下圖所示，黃色為版本綠色為我寫的配置，跟基本相似，具體不同下面會介紹藍色是自帶的模式紅色為具體大小速度大家可以比較一下，還是很給力的關于配置方面，應 前段時間webpack又發布了新版本webpack4我接觸的時候已經4.1版本了node支持的版本必須node: >=6.11.5 webpack...
閱讀 3486·2021-11-18 10:07
閱讀 1586·2021-11-04 16:08
閱讀 1502·2021-11-02 14:43
閱讀 1083·2021-10-09 09:59
閱讀 837·2021-09-08 10:43
閱讀 1073·2021-09-07 09:59
閱讀 954·2019-12-27 11:56
閱讀 994·2019-08-30 15:56
