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

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

上一篇:HTML&CSS


下一篇:Js中Date对象