使用webpack 配置 serviceworker 实现离线缓存

第一步安装 npm i -D serviceworker-webpack-plugin。
第二步：编写wepack.config.js 以下

const path = require('path');
            const ExtracTextPlugin =require('extract-text-webpack-plugin')
    const { WebPlugin ) = require (’ web-webpa ck-plugin ’);
            const ServiceWorkerWebpackPlugin = require (’ serviceworker-webpack-plugin ’);
                                module.exports = {
                                   entry : { 
                             app :’./main.j s ’ //项目的入口文件
                                 }，
                                 output:{
                                         filename:'[name].js',//定义输出文件名字
                                                 publicPath:''
                                 }，
                                 //配置须要哪些规则
                                  module:{
                                          rules:{
                                                   test: l\.cssl,11 增长对 css 文件的支持
                                  ／／提取出 Chunk 中的 css 代码到单独的文件中
                          use: ExtractTextPlugin.extract(( 
                           use: ［’ css-loader ］／／压缩 css 代码
                          }) ,
                                                }

                                    },
                                    plugins:[
                                          new WebPlugin(( 
                      template: '. ltemplate .html ’, II HTML 模板文件所在的文件路径
                     filename ：’ inde x.html ’／／输出 HTML 的文件名称
                     }) ,
                                             new ExtractTextPlugin({ 
                     filename 、［ name] .css ／／为输出的 css 文件名称加上 Hash
                     } ), 
                     new ServiceWorkerWebpackPlugin ({ 
                           entry: path.join （_dirname ，’ sw.js ’) , 
                     }),

                                    ]，
                                  devServer: (   //开启deServer服务
                  https: true ,
                                        }
                                }