webpack4 插件 webpack-sw-plugin

MIT
JavaScript
跨平台
2019-01-10
violinux666

特性

  • 简单的与webpack4使用

  • 不需要提供ServiceWorker文件

  • 提供了一个回调API,当webpack的输出文件发生变化时,你可以做一些处理

安装

npm install --save-dev webpack-sw-plugin

执行案例

npm run example

在浏览器内打开localhost:3000

使用教程

快速上手

webpack.config.js

const WebpackSWPlugin = require('webpack-sw-plugin');
module.exports = {
    // entry
    // output
    plugins:[
        new WebpackSWPlugin()
    ]
}

客户端

import worker from 'webpack-sw-plugin/lib/worker';
worker.register();

插件初始化选项

你可以传递一个配置给webpack-sw-plugin

plugins:[
    new WebpackSWPlugin({
        filename: "test-sw.js",
        minify: true
    })
]
  • filename: 输出serviceworker文件的文件名,默认值是 'service-worker-builder.js'.

  • minify: 控制serviceworker文件是否需要被压缩,如果是生产模式,将会被默认开启.

更新时回调

当webpack的输出文件变化时,我们提供了一个回调函数

import worker from 'webpack-sw-plugin/lib/worker';
worker.register({
    onUpdate:()=>{
        console.log('client has a new version. page will refresh in 5s....');
        setTimeout(function(){
            window.location.reload();
        },5000)
    }
});

如果客户端的webpack打包文件发生变化,onUpdate方法就会执行 例子中页面将会在5秒后进行刷新,刷新后页面将使用全新的打包文件

寻求帮助

License

MIT © violinux666

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

利用ServiceWorker实现页面的快速加载和离线访问

利用ServiceWorker实现页面的快速加载和离线访问 Service workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。它们旨在(除其他之外)使...

01/10 10:49
81
0
webpack 先这么用

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源; 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转...

2016/09/24 22:56
45
0
webpack2--tidying up

webpack2--tidying up,本学习记录来自于:[webpack2书籍 ](https://survivejs.com/webpack/building/tidying-up/ ) **tidying up**的理由:一次次的setup,导致以前每次使用webpack时产生的...

2017/06/20 23:05
9
0
wepack4+react+express

项目结构 webpack.demo --| public --| index.html --| src --| index.js --| index.less --| App.js --| App.less --| .babelrc --| package.json --| server.js --......

2018/08/12 14:50
18
0
Webpack学习笔记 - 提升篇

如果你已经读了 [Webpack学习笔记 - 入门篇](https://my.oschina.net/myshow/blog/813870 "入门篇"),是不是觉得已经可以用 `Webpack` 做些事情了。 > 是的,但是总觉的少了些么。馅里不只有...

2016/12/28 16:56
56
0
vue项目开启Gzip压缩

引用来自https://jingyan.baidu.com/article/454316ab29d0c0f7a7c03a1f.html 1、vue项目中开启gzip 2、将CompressionWebpackPlugin的设置由asset改为filename 3、卸载compression-webpack-p...

2018/12/26 11:12
4
0
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead...

2018/06/01 16:44
1K
0
Webpack 4.x + Vue2.x 开发环境搭建

Webpack 4.x + Vue2.x 开发环境搭建 项目地址:https://gitee.com/sino_crazy_snail/vue2-webpack4-template 初始化项目: mkdir test && cd test npm init -y 编辑package.json如下: { "n...

2018/10/21 10:11
13
0
package.json研究(1)——webpack-dev-server

package.json研究(1)——webpack-dev-server 整个package.json文件内容如下: { "name": "renren-fast-vue", "version": "1.2.1", "description": "renren-fast-vue基于vue、element-ui构建...

2018/10/10 13:31
35
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部