什么是PWA？

PWA，渐进式网络开发应用程序（离线可访问）
workbox => workbox-webpack-plugin
image.png

workbox-webpack-plugin

  1. npm i workbox-webpack-plugin -D

配置文件

  1. const { resolve } = require('path');
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
  7. // 定义nodejs环境变量：决定使用browserslist的哪个环境
  8. process.env.NODE_ENV = 'production';
  10. // 复用loader
  11. const commonCssLoader = [
  12.   MiniCssExtractPlugin.loader,
  13.   'css-loader',
  14.   {
  15.     // 还需要在package.json中定义browserslist
  16.     loader: 'postcss-loader',
  17.     options: {
  18.       ident: 'postcss',
  19.       plugins: () => [require('postcss-preset-env')()]
  20.     }
  21.   }
  22. ];
  24. module.exports = {
  25.   entry: './src/js/index.js',
  26.   output: {
  27.     filename: 'js/built.[contenthash:10].js',
  28.     path: resolve(__dirname, 'build')
  29.   },
  30.   module: {
  31.     rules: [
  32.       {
  33.         // 在package.json中eslintConfig --> airbnb
  34.         test: /\.js$/,
  35.         exclude: /node_modules/,
  36.         // 优先执行
  37.         enforce: 'pre',
  38.         loader: 'eslint-loader',
  39.         options: {
  40.           fix: true
  41.         }
  42.       },
  43.       {
  44.         // 以下loader只会匹配一个
  45.         // 注意：不能有两个配置处理同一种类型文件
  46.         oneOf: [
  47.           {
  48.             test: /\.css$/,
  49.             use: [...commonCssLoader]
  50.           },
  51.           {
  52.             test: /\.less$/,
  53.             use: [...commonCssLoader, 'less-loader']
  54.           },
  55.           /*
  56.             正常来讲，一个文件只能被一个loader处理。
  57.             当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
  58.               先执行eslint 在执行babel
  59.           */
  60.           {
  61.             test: /\.js$/,
  62.             exclude: /node_modules/,
  63.             loader: 'babel-loader',
  64.             options: {
  65.               presets: [
  66.                 [
  67.                   '@babel/preset-env',
  68.                   {
  69.                     useBuiltIns: 'usage',
  70.                     corejs: { version: 3 },
  71.                     targets: {
  72.                       chrome: '60',
  73.                       firefox: '50'
  74.                     }
  75.                   }
  76.                 ]
  77.               ],
  78.               // 开启babel缓存
  79.               // 第二次构建时，会读取之前的缓存
  80.               cacheDirectory: true
  81.             }
  82.           },
  83.           {
  84.             test: /\.(jpg|png|gif)/,
  85.             loader: 'url-loader',
  86.             options: {
  87.               limit: 8 * 1024,
  88.               name: '[hash:10].[ext]',
  89.               outputPath: 'imgs',
  90.               esModule: false
  91.             }
  92.           },
  93.           {
  94.             test: /\.html$/,
  95.             loader: 'html-loader'
  96.           },
  97.           {
  98.             exclude: /\.(js|css|less|html|jpg|png|gif)/,
  99.             loader: 'file-loader',
  100.             options: {
  101.               outputPath: 'media'
  102.             }
  103.           }
  104.         ]
  105.       }
  106.     ]
  107.   },
  108.   plugins: [
  109.     new MiniCssExtractPlugin({
  110.       filename: 'css/built.[contenthash:10].css'
  111.     }),
  112.     new OptimizeCssAssetsWebpackPlugin(),
  113.     new HtmlWebpackPlugin({
  114.       template: './src/index.html',
  115.       minify: {
  116.         collapseWhitespace: true,
  117.         removeComments: true
  118.       }
  119.     }),
  120.     new WorkboxWebpackPlugin.GenerateSW({
  121.       /**
  122.        * 1. 帮助serviceworker快速启动
  123.        * 2. 删除旧的 serviceworker
  124.        * 作用: 生成一个 serviceworker 配置文件~
  125.        */
  126.       clientsClaim: true,
  127.       skipWaiting: true
  128.     })
  129.   ],
  130.   mode: 'production',
  131.   devtool: 'source-map'
  132. };

注册serviceWorker

  • index.js
    /*
1. eslint不认识 window、navigator全局变量
  解决：需要修改package.json中eslintConfig配置
    "env": {
      "browser": true // 支持浏览器端全局变量
    }
 2. sw代码必须运行在服务器上
    --> nodejs
    -->
      npm i serve -g
      serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
*/
// 注册serviceWorker
// 处理兼容性问题
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
  navigator.serviceWorker
    .register('/service-worker.js')
    .then(() => {
      console.log('sw注册成功了~');
    })
    .catch(() => {
      console.log('sw注册失败了~');
    });
});
}