OfflinePlugin: ServiceWorker entry has more than one output file, only first will be used

[AsaAyers]

I'm using webpack dev server, and to use inline mode I need to include the dev server entry in my webpack configuration.

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {...});
server.listen(8080);

This effectively leaves my webpack with:

{
    entry: {
        app: [
            "webpack-dev-server/client?http://localhost:8080",
            "./app.js" 
        ]
    }

With the warning that OfflinePlugin produces, I can't figure out what problem it causes or what I can do to get rid of the warning other than just not use Webpack's dev server (not an option).

[NekR]

Thanks for the report, @AsaAyers

I personally do not use webpack-dev-server, so there is a good change that offline-plugin may not work with it.

About this particular warning, it's a bit complicated and in ideal world it should not happen. I thought it won't happen ever. It works this way:

To correctly work, ServiceWorker creates fake entryю Every entry is actually a chunk, and chunks in webpack by some reason has array files instead of one file. So it's possible that chunk may have more than one files and looking through webpack's code, it seems that it used only for hot-reload. Probably some kind of hack. This is why that warning exists, I simply do not understand why there might be more than one files in output for one chunk, plus it shouldn't modified anyway for ServiceWorker's fake entry. So, in case of hot reloading, it probably could be simply ignored since hot reloading shouldn't be embedded/used inside ServiceWorker.

Anyway, I have in plans to improve offline-plugin work with hot reloading, probably just disabling it in such mode. Btw, why you may need it with hot reloading? It's actually conflicting things since hot reloading is intended to load fresh files from server as soon as they changed, but offline-plugin is intended to load them from cache.

[AsaAyers]

I'm not using hot reloading. I just have it setup so that when any files change it tells the browser to refresh and load the new version. It seems like that should be fine if offline-plugin is using hash mode, I'm not sure about the others.

[AsaAyers]

Does it need to be a 2nd entry in a chunk? Could the service worker just be it's own chunk?

[NekR]

Does it need to be a 2nd entry in a chunk? Could the service worker just be it's own chunk?

SW has separate entry/chunk. It should be first and is first in files array. But plugin expects only it to there, so when there is more things (some other plugin added files) you get a warning about it, warning means that something may not work as expected since unexpected thing happened. However, it's not an error, just a warning, this means that SW entry was successfully compiled.

I'm not using hot reloading. I just have it setup so that when any files change it tells the browser to refresh and load the new version. It seems like that should be fine if offline-plugin is using hash mode, I'm not sure about the others.

Should be problem in any more I think. To update cache, SW anyway needs to be reloaded or update function needs to be called. So on each reload, you need one more reload to update cache. This could work, but what is the reason then to use it in dev mode?

I actually do not want to use plugin dev mode myself since I had to reload page twice to get update version. Problem is that at them moment runtime.js is a template and fails with systax error if plugin is not included, which I see as a right way to develop with offline-plugin: develop with it disabled, then before releasing enable it and test offline support.

Here is issue for it #4 but I had no time yet for it yet. Would be good to fix anyway.

[NekR]

Okay, fixed in 2.0.0. Should work normal with Webpack Dev Server. No with Hot Reloading or Live Reloading of course. With lazy mode it won't work too. Those modes are simply incompatible with this plugin and there is no sense to support them (or probably no way).

To test if everything works fine with ServiceWorker and AppCache -- just run regular server (or webpack server with simple options) for your dev/prod envs. You do not need to do it offset since almost everything is handled by offline-plugin for you.