1、准备

  1. function sum(...args) {
  2.   return args.reduce((p, c) => p + c, 0);
  3. }
  4. // eslint-disable-next-line
  5. console.log(sum(1, 2, 3, 4));
  6. /*
  7.    sw代码必须运行在服务器上
  8.       --> nodejs
  9.       -->
  10.         npm i serve -g
  11.         serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
  12. */
  13. // 注册serviceWorker
  14. // 处理兼容性问题
  15. if ('serviceWorker' in navigator) {
  16.   window.addEventListener('load', () => {
  17.     navigator.serviceWorker
  18.       .register('/service-worker.js')
  19.       .then(() => {
  20.         console.log('sw注册成功了~');
  21.       })
  22.       .catch(() => {
  23.         console.log('sw注册失败了~');
  24.       });
  25.   });
  26. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>webpack</title>
  8.   </head>
  10.   <body>
  11.     <h1>hello cache</h1>
  12.   </body>
  14. </html>

2、webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

/*
PWA: 渐进式网络开发应用程序(离线可访问)
workbox --> workbox-webpack-plugin
*/

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: { version: 3 },
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ],
              cacheDirectory: true
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
    new WorkboxWebpackPlugin.GenerateSW({
      /*
      1. 帮助serviceworker快速启动
      2. 删除旧的 serviceworker
      生成一个 serviceworker 配置文件~
      */
      clientsClaim: true,
      skipWaiting: true
    })
  ],
  mode: 'production',
  devtool: 'source-map'
};

3、结果

image.png
离线会访问server-worker文件。