复习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，会发现如今页面已经被缓存了。

断开服务器，再打开页面，发现页面已经被缓存了。这只是很基础的配置，若是须要更好的使用，仍是要去作更多的了解。