使用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 ,
                                        }
                                }