WebPACKのオフラインプラグイン

Question

私は既存のプロジェクトの使用の一口までのWebPACKとオフラインのプラグインを追加しようとしている - のWebPACK、

うまく働いたが、ハードの時間を与えているオフラインのプラグインを追加します私はオフライン・プラグインスロー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を追加されたものを

は、プロジェクト

のための主要なファイルです

は今、これまで私が使用prject実行している場合：

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

はので、私がオフライン・プラグインを使用している方法はcurrectであり、どのようにキャッシュされたフォームserviceworkerを提供することがothereファイルを追加するには、どのようなconfing私はそれがautmatclicy

をconfing WebPACKのスロー行うに追加する必要があります

私のプロジェクトのファイルツリー：

/_ 
    /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' 
    } 
}) 

を、含まれているようですすべての資産。