码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-10-18 16:51:24      阅读:30      评论:0      收藏:0      [点我收藏+]

标签:代码   提取   lte   路径   exp   plugin   icp   mod   code   

第一步安装 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 实现离线缓存

标签:代码   提取   lte   路径   exp   plugin   icp   mod   code   

原文地址:https://blog.51cto.com/14582569/2542236

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!