01 webpack4.0學習筆記——介紹

概述

        webpack是一個前端資源加載/打包工具。它将根據子產品的依賴關系進行靜态分析，然後将這些子產品按照指定的規則生成對應的靜态資源。

        當 webpack 處理應用程式時，它會遞歸地建構一個依賴關系圖，其中包含應用程式需要的每個子產品，然後将所有這些子產品打包成一個或多個 bundle。下面一張圖能更加形象的描述webpack：

webpack4.0新特性

        2018年2月份webpack4.0釋出，這跟之前版本的webpack相比，其中的配置及其他操作流程都發生了一定的變化，是以我們在接下來的文章中介紹新版的webpack4.0，是以，首先我們先來看看webpack4.0到底有哪些新特性：

1）環境支援

        官方宣布不在支援node 4, node 6 ，支援93%的ES6文法。是以當使用webpack4.0時，確定使用 nodeJS的版本至少大于8.9.4。因為webpack4.0使用了很多JS新的文法，它們在新版本的v8裡經過了優化。

2）mode 屬性

        webpack4.0需要設定mode屬性，可以是 development 或 production。

        通過mode, 你可以輕松設定打包環境。如果你将 mode 設定成 development，你将獲得最好的開發階段體驗。這得益于webpack針對開發模式提供的特性：

1、浏覽器調試工具
2、注釋、開發階段的詳細錯誤日志和提示
3、快速和優化的增量建構機制           

        如果你将mode設定成了 production, webpack将會專注項目的部署，包括以下特性：

1、開啟所有的優化代碼
2、更小的bundle大小
3、去除掉隻在開發階段運作的代碼
4、Scope hoisting和Tree-shaking           

3）插件和優化

        webpack4.0删除了CommonsChunkPlugin插件，它使用内置API optimization.splitChunks 和 ** optimization.runtimeChunk **，這意味着webpack4.0會預設為你生成共享的代碼塊。其它插件變化如下:

1、NoEmitOnErrorsPlugin 廢棄，使用optimization.noEmitOnErrors替代，在生産環境中預設開啟該插件。
2、ModuleConcatenationPlugin 廢棄，使用optimization.concatenateModules替代，在生産環境預設開啟該插件。
3、NamedModulesPlugin 廢棄，使用optimization.namedModules替代，在生産環境預設開啟。
4、uglifyjs-webpack-plugin更新到了v1.0版本, 預設開啟緩存和并行功能。           

4）開箱即用WebAssembly

        WebAssembly(wasm)會帶來運作時性能的大幅度提升，由于在社群的熱度，webpack4.0對它做了開箱即用的支援。你可以直接對本地的wasm子產品進行import或者export操作，也可以通過編寫loaders來直接import C++、C或者Rust。

5）支援多種子產品類型

        webpack4.0支援5種子產品類型：

1、javascript/auto: 在webpack3裡，預設開啟對所有子產品系統的支援，包括CommonJS、AMD、ESM。
2、javascript/esm: 隻支援ESM這種靜态子產品。
3、javascript/dynamic: 隻支援CommonJS和AMD這種動态子產品。
4、json: 隻支援JSON資料，可以通過require和import來使用。
5、webassembly/experimental: 隻支援wasm子產品，目前處于試驗階段。           

6）0CJS

        0CJS的含義是0配置，webpack4.0受Parcel打包工具啟發，盡可能的讓開發者運作項目的成本變低。為了做到0配置，webpack4.0不再強制需要 webpack.config.js 作為打包的入口配置檔案了，它預設的入口為'./src/'和預設出口'./dist'，這無疑對小項目而言是福音。

7）新的插件系統

1、所有的hook由 hooks 對象統一管理，它将所有的hook作為可擴充的類屬性。
2、當添加插件時，必須提供一個插件名稱。
3、開發插件時，可以選擇sync/callback/promise作為插件類型。
4、可以通過this.hooks = { myHook: new SyncHook(...) } 來注冊hook了。           

總結