Referencing dependencies from one chunk in another #369

Activity

1. sokra commented on Jul 21, 2014

   

   sokra

   on Jul 21, 2014

   Member

   More actions

   You can do it this way:

   var webpack = require("webpack");
   module.exports = {
     entry: {
       head: "./head.js",
       body: "./body.js"
     },
     output: {
       filename: "[name].js"
     },
     plugins: [
       new webpack.optimize.CommonsChunkPlugin("body", "body.js", ["head"], Infinity)
     ]
   };
2. kflorence commented on Jul 21, 2014

   

   kflorence

   on Jul 21, 2014

   Author

   More actions

   @sokra Hm, that doesn't seem to be working (webpack 1.3.2-beta1). Now I have the duplicated dependency in head.js and the body chunk (instead of body.js).

   A little more details:

   • In "head" there is an amd module called "track-stub" which provides a simple API stub for tracking calls before the full API is implemented in body.
   • In body, there is an amd module called "track" which required "track-stub" so it can fill out the API.

   This results in "track-stub" being defined in head (good) but it also gets duplicated in body (bad) because of the define call that lists it as a dependency.

   Here is my full config:

   module.exports = {
     context: path.resolve(paths.scripts.src),
     entry: {
       "body": "./body",
       "head": "./head",
       "home": "./home",
       "places": "./places"
     },
     externals: {
       handlebars: "Handlebars",
       jquery: "jQuery",
       zeroclipboard: "ZeroClipboard"
     },
     output: {
       path: path.resolve(paths.scripts.dest),
       publicPath: paths.publicPath,
       filename: "[name].js"
     },
     plugins: [
       new webpack.optimize.CommonsChunkPlugin("body", "body.js", ["head"], Infinity)
     ],
     resolve: {
       alias: {
         bootstrap: "bootstrap-sass-official/vendor/assets"
       },
       modulesDirectories: ["node_modules", "bower_components"],
       root: [paths.scripts.src]
     }
   };
3. sokra commented on Jul 21, 2014

   

   sokra

   on Jul 21, 2014

   Member

   More actions

   ups I got it wrong. It's

   new webpack.optimize.CommonsChunkPlugin("head", "head.js", ["body"], Infinity)
4. kflorence commented on Jul 21, 2014

   

   kflorence

   on Jul 21, 2014

   Author

   More actions

   After updating to webpack 1.3.2-beta3 and changing my config to:

   new webpack.optimize.CommonsChunkPlugin("head", "head.js", ["body"], Infinity)

   It seems to be working correctly. I will confirm shortly.
5. kflorence commented on Jul 21, 2014

   

   kflorence

   on Jul 21, 2014

   Author

   More actions

   Haha, just figured that out as well :) BTW what does the Infinity do?
6. kflorence commented on Jul 21, 2014

   

   kflorence

   on Jul 21, 2014

   Author

   More actions

   @sokra Confirmed that it's working. Both of the modules are using the AMD web + global pattern, but since they are inside webpack bundles this is just an empty Object. Changing it to window fixed it :)
7. kflorence

   closed this as completedon Jul 21, 2014
8. kflorence commented on Aug 7, 2014

   

   kflorence

   on Aug 7, 2014

   Author

   More actions

   @sokra Now I have a similar issue when trying to reference dependencies in different bundles. For example, I have a "common/head" bundle and a "common/body" bundle which load common assets that go inside the <head> tag and at the end of the <body> tag, respectively. The solution above works fine for these two files (where "common/body" depends on something in "common/head") -- but now I'm getting duplication in my entry files, for example "page1" entry that depends on something defined in "common/body" -- is there an easy way to link these dependencies other than looping through all of the defined entry points and adding more CommonsChunkPlugin instances for them?
9. kflorence

   reopened this on Aug 7, 2014
10. kflorence commented on Aug 7, 2014

    

    kflorence

    on Aug 7, 2014

    Author

    More actions

    Also, I think this will be a fairly common case for users with multiple bundles where some of those bundles store common dependencies.
11. kflorence commented on Aug 7, 2014

    

    kflorence

    on Aug 7, 2014

    Author

    More actions

    Basically I'm wanting to set up something like this: https://github.com/requirejs/example-multipage/blob/master/tools/build.js
12. sokra commented on Aug 7, 2014

    

    sokra

    on Aug 7, 2014

    Member

    More actions

    These r.js config maps to this webpack config:

    {
      entry: {
        page1: "app/main1",
        page2: "app/main2"
      },
      plugins: [
        new webpack.optimize.CommonJsPlugin("common.js")
      ]
    }
13. kflorence commented on Aug 8, 2014

    

    kflorence

    on Aug 8, 2014

    Author

    More actions

    @sokra I think I've got it figured out:

    var plugins = [
      // Automatically split commonly used assets into the "common/body" bundle.
      new webpack.optimize.CommonsChunkPlugin("common/body", "[name].js", nonCommonEntryPoints),
      // Make sure dependencies that are loaded in "common/head" bundle
      // and depended on in "common/body" bundle don't get duplicated.
      new webpack.optimize.CommonsChunkPlugin("common/head", "[name].js", ["common/body"], Infinity),
    ];

    Where nonCommonEntryPoints is an array of entry points without the common files included, like:

    ["page1", "page2"]

    Thanks for your help, as always.
14. kflorence

    closed this as completedon Aug 8, 2014
15. alexander-akait

    added 5 commits that reference this issue on Aug 29, 2026

    test(css): hold every lowering to the whole computed style, not the p…

    ...

    3a86926

    test(css): hold every lowering to the whole computed style, not the p…

    ...

    d6af4cc

    test(css): hold every lowering to the whole computed style, not the p…

    ...

    af2282e

    test(css): hold every lowering to the whole computed style, not the p…

    ...

    67d5e6c

    perf(css): drop what a declaration, a slot or a query already says (#…

    ...

    9683e21