Webpack可变命名为require

Question

I'm writing a nodejs/react app with feature modules that will ideally be toggled on and off via a configuration.json file. The feature modules have an entry point to establish server-side routes for their requests, and another to establish client-side routes within React.

The server-side configuration works just fine. At boot-time of the server, it checks the configuration setting, loads the appropriate module, and calls its register() function, to register its server-side routes, controllers, etc. However, when trying to webpack this bundle for deployment to the client, I'm having issues trying to iterate over the list of modules to include, and have them webpacked in to the bundle being deployed.

I've done a lot of research so far, but webpack is still a little difficult to wade through. The closest I've come was adding a section to my webpack.config.js file to preload the routes to the individual modules, include them in the bundle to have the code available on the client, and then stick their names into a FEATURE_MODULES global variable via DefinePlugin, and check for the existence of that within React, to try to load and register() those modules once they hit the browser.

So far, the code seems to be added to the bundle, and the module paths are passed properly to the client in that global variable, but trying to require() them in on the client is throwing an error about the module not being found, most likely because webpack is replacing the module names with numbers for its lookup map.

I've also come across stuff about require.context and being able to RegExp these things, but that's where I'm starting to get lost. Can anybody provide me with an example or a link to something a little more easily-consumed, to demonstrate how to get this done?

Answer 1

Not 100% clear on what you're doing that's breaking (maybe you can post specifics if the above doesn't help?), but general guidelines:

• Webpack will parse any require() that it sees in the code; it's a static parser that isn't very 'smart'. So traditional conditional logic around which things to require won't solve your problem, as all the requires will get parsed
• If your conditionals check boolean variables (typically defined via the Define plugin), the webpack parser will understand them, and only the requires that pass the conditional checks will get parsed. You can then use the Uglify plugin's dead code elimination to get rid of the conditional logic that isn't needed.
• "Dynamic" requires are usually a bad idea because they cause webpack to bundle every file in the directory requested (because it can't figure out which one you're asking for at build time). If you're asking for something that doesn't exist you can then get runtime errors (and build-time errors are obviously preferable).

The above should get you pretty much whatever you need. And replacing file paths with numbers in requires is how webpack's runtime works, so if that's a problem you're probably going about something the wrong way.

If it seems like you'll have to define too many flags via the define plugin, and/or set up too much conditional logic -- are these separate builds? It's pretty easy to set up multiple builds w/a single webpack config file, and to reuse shared config between them.