的WebPack离线插件如何添加资产sw.js

我想要的WebPack和离线插件添加到现有的项目中使用一饮而尽 - 的WebPack工作得很好，但加入离线插件是给困难时期，的WebPack离线插件如何添加资产sw.js

我所做的是增加了离线插件掷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); 
      }

现在当过运行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提供的文件不是我添加到插件主cahches对象中的任何filses：

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

所以是我使用的离线插件是当期的，以及如何添加othere文件缓存及送达的形式serviceworker，我应该加做什么confing扔的WebPack confing autmatclicy

方式

我的项目文件树：

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

来源

2016-09-07 user3853257

我用这个：

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

，它似乎包括所有的资产。

来源

2017-02-12 09:40:09

的WebPack离线插件如何添加资产sw.js

回答

相关问题