複習webpack4之PWA打包配置

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不單單要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1.PWA

咱們安裝一下http-server，能夠幫咱們啓動一個本地的服務，模擬線上環境。

http-server dist的意思是：根據dist目錄啓動一個本地服務。

啓動以後，咱們就能夠正常訪問頁面了。此時若是斷開服務，就會出現沒法訪問此網站。

而PWA的做用就是，在斷網的狀況下，依然能夠訪問這個網站。

2.配置方法

咱們能夠根據現有的webpack插件來實現，首先安裝插件

cnpm install -D workbox-webpack-plugin
複製代碼

而後引入插件。

而後在插件中配置。

而後進行打包，會發現打包的文件多了兩個js。

這兩個文件是用來幫咱們實現PWA的。如今還須要寫一些業務代碼。

再次從新打包後，啓動http-server，會發現如今頁面已經被緩存了。

斷開服務器，再打開頁面，發現頁面已經被緩存了。這只是很基礎的配置，若是須要更好的使用，仍是要去作更多的瞭解。