1  const path = require('path')
 2  const HtmlWebpackPlugin = require('html-webpack-plugin')
 3  const WorkboxPlugin = require('workbox-webpack-plugin')
 4  const OfflinePlugin = require('@lcdp/offline-plugin')
 5  const WebpackPwaManifest = require('webpack-pwa-manifest')
 6  
 7  module.exports = {
 8    entry: './src/index.ts',
 9  
10    module: {
11      rules: [
12        {
13          test: /\.ts$/,
14          use: 'ts-loader',
15          exclude: /node_modules/,
16        },
17  
18        {
19          test: /\.png$/,
20          use: [
21            'file-loader',
22          ],
23        },
24  
25        {
26          test: /\.css$/,
27          use: [
28            'style-loader',
29            'css-loader',
30          ],
31        },
32      ],
33    },
34  
35    resolve: {
36      extensions: ['.js', '.ts'],
37    },
38  
39    output: {
40      filename: 'app-[contenthash].js',
41      path: path.resolve(__dirname, 'public'),
42    },
43  
44    plugins: [
45      new HtmlWebpackPlugin({
46        template: 'src/assets/index.html',
47        favicon: 'src/assets/img/favicon.png',
48      }),
49  
50      new WebpackPwaManifest({
51        name: 'Bobby',
52        short_name: 'Bobby',
53        icons: [
54          {
55            src: path.resolve('src/assets/icons/icon.png'),
56            sizes: [ 96, 128, 192, 256, 384, 512 ],
57          },
58        ],
59        start_url: '/',
60        background_color: '#42c79c',
61        display: 'standalone',
62        theme_color: '#42c79c',
63      }),
64  
65      new OfflinePlugin({
66        caches: {
67          additional: [
68            ':rest:',
69          ]
70        },
71        safeToUseOptionalCaches: true,
72        updateStrategy: 'changed',
73      }),
74      
75      new WorkboxPlugin.GenerateSW({
76        clientsClaim: true,
77        skipWaiting: true,
78      }),
79    ],
80  }