Webpack4使用總結

最近一個工程要搭建腳手架，不經意看到webpac已經升級到4.x了，這邊就藉機搭建了一個webpack的腳手架，對webpack的研究不是很深， 沒關注過它的實現層，只是拿來用，這裏大概寫下使用過程和對一些配置的理解。

webpack4和前代來比，精簡了不少配置，寫法上也更佳優雅和便於理解了，而且支持了0配置的方式，估計也是受到吐槽配置過於負責的詬病而做出的妥協，像parcel主打的概念就是0配置，一行腳本完成打包，不過老實說0配置在大多數狀況並不實用，配置這東西多了複雜，少了不靈活，仍是須要一個度的。
複製代碼

webpack官網對於webpack的說明列出了四大核心概念：

入口(entry)

輸出(output)

loader

插件(plugins)

這裏不對這些概念進行展開了，咱們的配置實際上就是圍繞這4個核心概念作的，先說入口吧

入口（entry）

實際上webpack4在這裏的變化不大，這裏我介紹一個多頁面的配置狀況，可能不少人使用vue或者react單頁面spa時入口是隻須要配置一個的，可是對於多頁面程序，入口是要有多個的，像官方給的例子：

在多頁應用中，（譯註：每當頁面跳轉時）服務器將爲你獲取一個新的 HTML 文檔。頁面從新加載新文檔，而且資源被從新下載。然而，這給了咱們特殊的機會去作不少事 固然實際使用中咱們不可能去一個一個配置入口文件，固然是自動去處理這塊了，固然解決辦法基本就是讀取頁面目錄，對每一個文件生成對應入口文件，固然你能夠選擇構建的時候爲每一個文件自動生成entry，也能夠提早寫好。多頁面的共享代碼可使用CommonsChunkPlugin提取打包，這裏說一下在webpack4中CommonsChunkPlugin已經不復存在，後文會提到

輸出（output）

一樣這裏的改動也不大，這裏也說一個比較重要的小地方，一個使用cdn資源hash的複雜例子：

在編譯時不知道最終輸出文件的 publicPath 的狀況下，publicPath能夠留空，而且在入口起點文件運行時動態設置。若是你在編譯時不知道 publicPath，你能夠先忽略它，而且在入口起點設置 webpack_public_path。

publicPath在這裏能夠理解爲一個頁面引入文件根路徑的地址，像上面的例子頁面的src會標示成：cdn.example.com/assets/[has…

模式

這裏要插入講一下webpack4新增的模式，記得在以前版本的配置文件裏咱們常常要使用到process.env去判斷環境以處理不一樣設置，在wenpack4中出現了mode，讓環境配置變得簡單起來，你能夠這樣用：

表示當前啓用什麼環境去處理，固然設置一個mode不只是生命環境變量這麼簡單，不一樣的環境webpack會默認幫你開啓對應的plugin.

if === development :會將 process.env.NODE_ENV 的值設爲 developme。啓用 NamedChunksPlugin 和 NamedModulesPlugin。

if === production :會將 process.env.NODE_ENV的值設爲 production。啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin和 UglifyJsPlugin

咱們在開發中，徹底能夠配置一個 webpack.config.js來放公共的配置，而後創建一個dev環境的js mode設置爲development，prod環境的js，mode設置爲production,而後藉助webpack-merge來完成本地開發及構建的任務。

loader

loader用法上沒有什麼改變，loader 用於對模塊的源代碼進行轉換。所以，loader 相似於其餘構建工具中「任務(task),好比gulp」，並提供了處理前端構建步驟的強大方法。loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript

這裏說一種loader的官方不怎麼推薦的用法，內聯的方式：

能夠在 import 語句或任何等效於 "import" 的方式中指定 loader。使用 ! 將資源中的 loader 分開。分開的每一個部分都相對於當前目錄解析。

importStylesfrom'style-loader!css-loader?modules!./styles.css';

經過前置全部規則及使用 !，能夠對應覆蓋到配置中的任意 loader。

選項能夠傳遞查詢參數，例如 ?key=value&foo=bar，或者一個 JSON 對象，例如 ?{"key":"value","foo":"bar"}，固然這並非官方推薦的方式，儘可能不要使用。

插件

插件這裏的改動也並不大，由於使用webpack4時搭建的是一個vue的多頁面工程，因此這裏寫一下對於搭建vue多頁面工程的配置方式，網上對於多頁面的webpack配置說明比較少，其實對於多頁面來講，基本的思想就是在入口配置多項，而後配合HtmlWebpackPlugin爲不一樣的頁面關聯不一樣的js文件，也就須要爲每一個頁面配置一個entry.js,裏面只須要寫初始化vue實例的代碼以及頁面須要引入的公共組件就能夠了，通常方式是循環源碼文件夾路徑，根據路徑配置入口，而後能夠在每一個頁面文件夾下手動寫一個用於初始化的entry，或者在構建過程當中，經過代碼自動生成的方式均可以。