Multiple webpack entry points about offline-plugin

[NekR]

Hi, @andreialecu. It's not supported. And I am not sure if even built-in plugins support it, e.g. ExtractTextPlugin. Also I am sure that AppCachePlugin doesn't support it and it wasn't supported by HtmlWebpackPlugin when I last checked it. Do you know plugins which support it?

@sokra, hi, can you provide a bit of info here, does built-in webpack plugins have this feature? Thanks.

[andreialecu]

ExtractTextPlugin does work with this, as I'm using it already.

My config looks like this:

      new ExtractTextPlugin('[name].css', {
        allChunks: true
      }),

This generates separate files for each entry point, named entry1.css, entry2.css, etc

[NekR]

@andreialecu okay, if I will have free time I will do it. Thanks for the report! But there might some problems, because SW isn't a generic thing, it has its own limitations, etc.

[andreialecu]

It may be possible to create separate sw.js files per entry point. so if you have

entry: {
  admin: '...',
  frontend: '...'
},

This plugin could generate sw-admin.js and sw-frontend.js, and appcache/admin-manifest.*, and then simply link to these specific ones from each of the entry points in require('offline-plugin/runtime').install();

[NekR]

Sounds good, but easy said than done :-)

[NekR]

Okay, I think I may have time for it in a couple next weeks. So hope to get it soon.

[andreialecu]

Sounds great! :)

[andreialecu]

Hey @NekR just an update here:

I found where the assets can be found by each entry point.

The stats object looks like this (compilation.getStats().toJson()):

{
  ...,
  "chunks": [ {
    "id": 0,
    "rendered": true,
    "initial": true,
    "entry": true, // filter by this
    "extraAsync": false,
    "size": 12584507,
    "names": [
      "admin"
    ],
    "files": [
      "admin.js",
      "admin.css"
    ],
    "hash": "e5fa08f4e3c6f03a9a4d",
    ...
  },
  { other module with id 1, etc }
  ],
  "modules": [
     {
        "id": ...,
        ...,
        "chunks": [ 1, 3 ], // this belongs to chunk with id 1 and 3
        "assets": [
          "assets/static/appstore.d0558d91063038236b60e3ef71fdc1fd.svg"
        ]
     }
  ]
}

It seems fairly trivial to parse this into a list of assets per entry chunk

[NekR]

Unfortunately it's more complicated than that. I already started working on a v3 of offline-plugin, progress is in a v3 branch.

I also have project where webpack builds different entries from one source code, so as you may guess I am also interested in this feature. But at a moment offline-plugin written as multi-stage build, it uses different compiler events and creates child compilation. Also in case of offline-plugin, support for multi-entry means using different instances of it for each entry.

So, having this feature means massive rewrite, if not whole rewrite.

[NekR]

I am thinking about it and I am actually pretty close to implement it. But there is a problem -- other plugins like html-webpack-plugin. Each separate file generated by it is a separate entry and there is no way to track those entries to real entry they should belong.

[knvpk]

Hi @NekR , yes it is not possible for those are using the html-webpack-plugin, And @andreialecu mine is also same problem that i have totally 4 single page apps and for now im doing the sw.js registration in one html page where it will cache the total 4 pages and thier associated assets after doing that i realized that one 2nd html page is updated to new version and deployed to server it is only updating in the user browser only when they go to 1st page and reload it (SW case). But i want to check the same sw.js file should be registered for all pages then problem may be solved or error saying that sw is already registered.

[NekR]

Hi, @andreialecu. How did you made webpack to emit different files in one chunk? e.g. this:

    "files": [
      "admin.js",
      "admin.css"
    ],

As I see in webpack's source code, only source maps and hot-module files are added as additional files to chunks.

[NekR]

@pavankumarkatakam thanks for info, trying to figure everything out now.

[andreialecu]

I'm using extract-text-webpack-plugin and using require seem to make the css go into the right place by default without extra configuration.

[knvpk]

Is there any progress on this.

[NekR]

Internally plugin is ready for it. Once I have time to get back to work on it, I can do this.

[NekR]

Btw, have you considered webpack's Multiple configurations? What is principally better in outputting different entries from one configuration?

I am not agains adding this feature, but trying to understand how much it's needed.

[graingert]

Faster and the commons chunks plugin.

FYI HtmlWebpackPlugin supports multiple entry points

[NekR]

Faster and the commons chunks plugin.

This is the answer to what?

FYI HtmlWebpackPlugin supports multiple entry points

That's great, but HtmlWebpackPlugin don't need to detect in which entry the runtime was called. Do you know how to do it?

[NekR]

Sorry, I don't see a use for it anymore. PR is welcome if anyone needs this feature, I don't and it's too complicated to implement.

[johanneswilm]

Sorry, I don't see a use for it anymore. PR is welcome if anyone needs this feature, I don't and it's too complicated to implement.

@NekR: For those of us new to the offline-plugin and needing something like this, could you briefly explain what happened between summer 2015 and spring 2017 that made this no longer needed? It sounded like you almost finished this in 2016 but then in 2017 you saw no need for it any more. Is there some obvious other way of doing it now?