特性
简单的与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秒后进行刷新，刷新后页面将使用全新的打包文件
寻求帮助
直接提一个issueSubmit a issue
License
MIT © violinux666
-
webpack插件编写 by Anurag Majumdar 通过阿努拉格·马朱达尔 如何使用Webpack和渐进式Web技术编写简单的现代JavaScript应用程序 (How to write simple modern JavaScript apps with Webpack and progressive web techniques) Have you thought about mak
-
一、Webpack 简介 1.1 webpack 是什么 webpack 是一种 前端资源构建工具，一个静态模块打包器(module bundler)。 在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 1.2 webpack 五个核心概念 1.2.1 Ent
-
前言： plugins：插件 在vue项目开发中，通常在vue.config.js中会配置webpack的相关配置 其中在plugins中配置相关的插件 plugins:[ new xxx(), // 使用相关插件 new xxx(), ... ] 自定义插件 官网介绍 核心plugins钩子：compiler 和 compilation 对象 理解： Plugin通过访问Compiler
-
一、webpack常用的插件安装命令 1、自动快速的帮我们生成HTML npm install html-webpack-plugin --save-dev 2、样式 我们需要两种loader，css-loader 和 style－loader，css-loader会遍历css文件，找到所有的url(…)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。 np
-
webpack-Plugin 1、认识Plugin Webpack核心是Plugin Loader是用于特定的模块类型进行转换； Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等； 2、CleanWebpackPlugin 自动删除dist文件 安装：npm install clean-webpack-plugin -D const { CleanWebpackPlu
-
webpack的plugins(插件)是其的辅助功能，主要作用是解决其loader无法实现的事情，今天将详细介绍HtmlWebpackPlugin插件的功能 作用: 1. 生成项目的主入口html文件，一般原则是单应用的话会生成一个html文件，多应用的话会生成多个对应的html文件 2. 管理生成的html中引入js,css等资源配置，一般在多应用中会体现的比较突出一些 源码: 此处的配置项也是
-
1.Plugin (1)什么是插件(plugin) plugin 用于扩展webpack的功能，当然loader也是变相的扩展了webpack ，但是它只专注于转化文件这一个领域，而plugin的功能更加的丰富，而不仅局限于资源的加载。 (2)如何使用插件 ① 通过npm安装对应的插件。 ② 用require导入插件。 ③ 在plugins中new插件。 2.webpack-html-plugin
-
作用 直接为项目生成一个或多个HTML文件（HTML文件个数由插件实例的个数决定），并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。通过配置，可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外，还可以通过向插件传递参数，控制HTML文件的输出。 用法： 第一步：在项目根目录下安装插件： cnpm install html-webpack-plu
-
继上回介绍了如何开发webpack loader 之后。趁热打铁，来继续看下webpack另一个核心组成：plugin。 下面也和loader一样，让我们一起从基本的官方文档着手看起。 loader和plugin的差别 loader : 顾名思义，某种类型资源文件的加载器，作用于某种类型的文件上。webpack本身也是不能直接打包这些非js文件的，需要一个转化器即loader。 loader本身是
-
info 一个 webpack 插件，解决 service-worker.js 的注册和更新问题。 Lavas 解决方案默认集成该插件用来实现 Service Worker 文件的注册及缓存更新机制，默认只在 build 生产环境下构建生效。 github: https://github.com/lavas-project/sw-register-webpack-plugin.git 背景 PWA
-
info 一个 webpack 插件，解决 service-worker.js 的注册和更新问题。 Lavas 解决方案默认集成该插件用来实现 Service Worker 文件的注册及缓存更新机制，默认只在 build 生产环境下构建生效。 github: https://github.com/lavas-project/sw-register-webpack-plugin.git 背景 PWA
-
可以在 nuxt.config.js 中添加 Webpack 插件： const webpack = require('webpack') module.exports = { build: { plugins: [ new webpack.ProvidePlugin({ '$': 'jquery', '_': 'lodash'
-
webpack 插件作为独立文件提供，并且应当直接 require： const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') 生成的默认文件是： vue-ssr-s
-
SW-HTTPD is a simple, secure, and robust HyperText Transfer Protocol Daemon Written in the C programming language. It implements the bare minimum of HTTP 1.1 necessary to be a productive web server.