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

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

转载于:https://juejin.im/post/5cdc187f6fb9a031eb58bc49