How to embed clientlibs in webpack projects

Question

Is there any way to embed clientlibs in projects which create front-end code via webpack? Any documentation or examples are welcomed. Thanks,Kiran Vedantam.

Shubham_borole · Accepted Answer

I may be off here, I am not clear on the webpack set up you have. But can you see if you can have the file/s to be embedded (included) in a common place and just import them in the entry points of templates (or any other structure you have followed)? Webpack should be able to handle import duplications I think. Not ideal probably since we won't be able to import the clientlib as whole itself may be.

Otherwise, According to https://www.npmjs.com/package/aem-clientlib-generator I see within the clientlib.config.js when generating a clientlib say "test.base.apps.mainapp", can we try to use embed for eg

// or as object (single clientlib)
  libs: {
    name: "test.base.apps.mainapp",
    embed: "test.base.apps.commonstuff",
    category: "also.optional"
    assets: {
      js: [
        "src/frontend/js/app.js"
      ],
      css: [
        "src/frontend/css/styling.css"
      ]
    }
  }

sudeshb1607 · Answer

Hi @kiran_vedantam ,

ClientLibs are the recommended way when working with AEM, however since webpack is in trend now. You can refer to below examples to work on integration with different approaches:

https://dev.to/anfibiacreativa/integrating-a-modern-frontend-in-a-multi-tenant-aem-project-part-2-45ni

https://www.initialyze.com/blog/2020/11/how-to-use-dynamic-imports-with-adobe-aem/

https://www.npmjs.com/package/@aem-design/compose-webpack

https://github.com/Bounteous-Inc/aem-webpack-example

Thanks,

Sudesh