Tuesday, September 26, 2017

in webpack, force some modules to be automatically loaded at startup

By Hường Hana 6:00 AM Leave a Comment

In my server-side bundle, I have some modules that contains server-side api and I would like to make these modules to be loaded (and run) as soon as possible (at the same time as the entry point).

I have some constraints:

  • I don't know the name of these modules (they are generated during the compilation and they are just "marked" from a loader, using this._module.meta.myApiModule = true).
    These modules are partially shared between client and server in an isomorphic web app. The client knows the server module hash because client-side and server-side module share the same hash (thanks to webpack.HashedModuleIdsPlugin). In some situations, the client make api calls to the server, and the module that holds the api must be loaded before the call.

  • all marked modules must be called (required) at startup.
    These modules contains code to register their api (eg. mainFramowork.registerRpcApi(...)) this is why they must be loaded at startup.

more details:

I use vuejs and my .vue files are processed by webpack. Each vue file generates webpack modules (for the script part, the markup part, style, and optionally customBlocks that can be used freely)

foo.vue (file) -> html (webpack module) -> script (webpack module) -> style (webpack module) -> customBlock (webpack module, rawRequest:"!!babel-loader!addmeta-loader?{"mark":"api"}!XXX/node_modules/vue-loader/lib/selector?type=customBlocks&index=1!./foo.vue")  bar.vue -> html (webpack module) -> script (webpack module) -> style (webpack module) -> customBlock (webpack module, rawRequest:"!!babel-loader!addmeta-loader?{"mark":"api"}!XXX/node_modules/vue-loader/lib/selector?type=customBlocks&index=1!./bar.vue")

Now, my aim is to call ALL "customBlock modules":

  • at startup (how??)
  • on chunk load (maybe with an entry point in the chunk??, this implies to move all my customBlocks modules in a new chunk then dynamically create a module that will call all my customBlock modules (wow))
  • by hand: require('please_call_all_custom_blocks_modules_thanks')

2 Answers

Answers 1

I think what you want is something like this

// loader.js var moduleName = getSomeModuleNameInRuntime(); require("bundle!./path/" + moduleName)(function(myModule) {   // ... });

see this issue here

Answers 2

You can include them via webpack config directly.

//webpack.config.js  {   entry: {     "server" : [       'myrequiredBundle1',        'myrequiredBundleN',        './server.entry.js'     ]   } }

otherwise:

// server.entry.js  import 'myRequiredBundle1'; import 'myRequiredBundleN';  /* the rest */

I would implement your feature using WebpackDLL and WebpackDLLReference. In this way you can perfectly control names and exports of your dll... Just make your isomorphic library a DLL.

You can also have a look at:

  1. library => https://webpack.js.org/configuration/output/#output-library
  2. webpack magic comments => https://webpack.js.org/api/module-methods/#import-
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment