1. chapter
    2. ├─babel.config.js
    3. ├─package-lock.json
    4. ├─package.json
    5. ├─postcss.config.js
    6. ├─src
    7. |  ├─index.html
    8. |  └index.js
    9. ├─build
    10. |   ├─webpack.common.js
    11. |   ├─webpack.dev.js
    12. |   └webpack.prod.js

    为了模拟线上的服务器运行环境，我们先来安装一个http-server。
    安装：

    1. $ npm install http-server -D

    配置一个脚本命令start：

    1. "scripts": {
    2.   "dev": "webpack serve --config ./build/webpack.common.js",
    3.     "build": "webpack --env production --config ./build/webpack.common.js",
    4.     "start": "http-server dist"
    5. },

    编写一段代码：

    1. console.log("Hello Word!");

    这个时候npm run start编译后控制台就会给我们一个本地服务器的地址，我打开这个地址项目就能看到console.log了一个字符串。

    接着我们把start的服务终止掉，然后刷新页面就无法继续访问页面了。
    image.png

    我们可以利用workbox-webpack-plugin（PWA）来设置项目的缓存，即使服务器停止不能使用了，项目页依然可以运行。
    安装：

    1. $ npm install workbox-webpack-plugin -D

    配置workbox-webpack-plugin：

    1. // ...
    2. const { GenerateSW } = require("workbox-webpack-plugin")
    4. module.exports = {
    5.   plugins: [
    6.     new GenerateSW({
    7.       clientsClaim: true,
    8.       skipWaiting: true
    9.     })
    10.   ]
    11. }

    新增一段代码：

    1. console.log("Hello Word!");
    3. // 如果浏览器支持 serviceWorker
    4. if ("serviceWorker" in navigator) {
    5.   window.addEventListener("load", () => {
    6.     navigator.serviceWorker.register("/service-worker.js")
    7.       .then(registration => {
    8.         console.log("service-worker registed")
    9.       }).catch(error => {
    10.         console.log("service-worker register error")
    11.       })
    12.   })
    13. }

    等配置好Webpack配置文件后重新运行 npm run build生成新的业务代码，再运行npm run start启动服务器，这个时候就能看到页面输出了 service-worker registed
    image.png
    随后我们接着终止start服务然后刷新页面发现页面依然能输出Hello Word。