Офлайн-плагин Webpack для добавления ресурсов в sw.js

Question

Я пытаюсь добавить webpack и offline-плагин к существующему проекту, использую gulp - webpack работает просто отлично, но добавление offline-плагина вызывает трудности,

я добавил добавление оффлайн-плагина 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 - основной файл проекта

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 {
           // The 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);
          }

Теперь, когда запускаю проект, я использую:

node_modules/.bin/webpack

это возвращение

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

Затем я запускаю сервер gulp:

gulp serve

и я проверяю возврат sw.js и показывает, что только bundle.js файл, который был обслужен, не какой-либо из файлов, которые я добавил к объекту main cahches плагинов:

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
 };

То, как я использую автономный плагин, является точным, и как добавить другие файлы, которые будут кэшироваться и обслуживаться из serviceworker, что мне нужно добавить, чтобы сделать это, бросить веб-пакет конфетной автоматики

дерево моего проекта:

/_
  /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 

Answer 1

Я использовал это:

new OfflinePlugin({
  version: '[hash]',
  responseStrategy: 'network-first',
  safeToUseOptionalCaches: true,
  ServiceWorker: {
    events: true,
    output: 'static/js/sw.js'
  }
})

и, кажется, включает в себя все активы.