javascript - Webpack offline plugin how to add assets to sw.js -
i'm trying add webpack , offline-plugin existing project use gulp - webpack working fine adding offline-plugin giving hard time,
what did adding offline-plugin throw npm
webpack.confing.js
const {resolve} = require('path') const webpackvalidator = require('webpack-validator') const offlineplugin = require('offline-plugin'); module.exports = webpackvalidator({ context: resolve('app/scripts'), entry: ["./main.js","./skrollr.js"], output: { filename: "[name].[hash].js", },devtool: 'eval', module: { loaders :[ {test:/\.(jsx|js)$/,exclude: /node_modules/,loader: 'imports?jquery=jquery,$=jquery,this=>window'}, { test: /\.css$/,exclude: /node_modules/, loader: "style-loader!css-loader" }, { test: /\.eot$/, loader: "file-loader" }, { test: /\.woff2$/, loader: "file-loader" }, { test: /\.woff$/, loader: "file-loader" }, { test: /\.svg$/, loader: "file-loader" }, { test: /\.ttf$/, loader: "file-loader" }] }, resolve: { extensions: ['', '.js', '.jsx','.css','.eot','.woff2','.woff','.svg','.ttf'] }, plugins: [new offlineplugin({ caches:{"main":['images/bgz.jpg','app/images/hamburger.svg','app/images/logo_grey.svg']}, externals:['images/bgz.jpg','app/images/hamburger.svg','app/images/logo_grey.svg'],serviceworker:{output:'/sw.js'}})] }); main.js main file project
var skrollr = require('./skrollr.js'); require('../styles/main.css'); (function () { 'use strict'; $("#skrollr-body").css("background","green"); require('../../node_modules/offline-plugin/runtime').install(); if ('serviceworker' in navigator) { navigator.serviceworker.register('/sw.js', {scope: './'}).then(function(registration) { document.queryselector('#status').textcontent = 'succeeded'; }).catch(function(error) { document.queryselector('#status').textcontent = error; }); } else { // current browser doesn't support service workers. var aelement = document.createelement('a'); aelement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq'; aelement.textcontent = 'unavailable'; document.queryselector('#status').appendchild(aelement); } now when ever running prject use :
node_modules/.bin/webpack it return
hash: 496a6f3a79110e844236 version: webpack 1.13.2 time: 3167ms asset size chunks chunk names main.496a6f3a79110e844236.js 1.01 mb 0 [emitted] main sw.js 14.4 kb [emitted] appcache/manifest.appcache 134 bytes [emitted] appcache/manifest.html 58 bytes [emitted] [0] multi main 40 bytes {0} [built] + 8 hidden modules child __offline_serviceworker: + 3 hidden modules then run gulp server :
gulp serve and inspect sw.js returns , shows bundle.js file served not of filses added plugins main cahches object :
var __wpo = { "assets": { "main": [ "../.././scripts/bundle.js" ], "additional": [], "optional": [] }, "hashesmap": { "f250efd8234ae0d9bbb5e1db4a4ce8bf": "../.././scripts/bundle.js" }, "strategy": "all", "version": "9/6/2016, 6:40:24 pm", "name": "webpack-offline", "relativepaths": true }; so way i'm using offline-plugin currect , how add othere files cached , served form serviceworker , confing should add throw webpack confing autmatclicy
my project file tree :
/_ /app /index.html /images /bgz.jpg /hamburger.svg /logo_grey.svg /fonts /scripts /main.js /bundel.js /node_moudles sw.js packge.json webpack.config.js
i used this:
new offlineplugin({ version: '[hash]', responsestrategy: 'network-first', safetouseoptionalcaches: true, serviceworker: { events: true, output: 'static/js/sw.js' } }) and seems include assets.
Comments
Post a Comment