概述
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）新的插件系統
webpack4.0對插件系統進行了不少修改，提供了針對插件和鉤子的新API。變化如下：
1、所有的hook由 hooks 對象統一管理，它將所有的hook作爲可擴展的類屬性。
2、當添加插件時，必須提供一個插件名稱。
3、開發插件時，可以選擇sync/callback/promise作爲插件類型。
4、可以通過this.hooks = { myHook: new SyncHook(...) } 來註冊hook了。
總結
本文簡單介紹下webpack是什麼以及webpack4.0的新特性，這些新特性在接下來的文章中我們會依次介紹，在此處大家有一個映像就可以。通過本文的閱讀，大家需要知道的是：webpack是什麼東西。文章介紹的比較簡單，大家可以查閱其他的資料搞清楚我們接下來介紹的webpack到底是做什麼的就可以。