Menu Close
    Hire us Request quote Reading list Switch to dark mode
    lockdownWebkulUp

    Dynamic entries in WebPack

    Why?

    Why we need dynamic entries?
    Assuming that we have a file structure for a project is something.

    We have to create entry for each of the Js file and every time we add any new file.

    Solution

    We can create a single entry in webpack.config.js which will include every assets file.
    We can create dynamic entries all because of the entry property of Webpack config.
    entry property can accept:

    • String :
      './Modules/Modules_1/Assets/Js/a.js'
    • Array of Strings:
      [
      './Modules/Modules_1/Assets/Js/a.js',
      './Modules/Modules_1/Assets/Js/b.js'
      ]

    • Object:
      {
      'js/a': './Modules/Modules_1/Assets/Js/a.js',
      'js/b': './Modules/Modules_1/Assets/Js/b.js'
      }

    Now, coming to the dynamic part

    We use ‘glob’ for this, When passed a string, Glob will attempt to find each file that matches the path given and return each path to the file as string array.

    webpack.config.js

    The above code is used for dynamic entry in symfony/webpack-encore
    Similarly we can use in core webpack using below code for entry

    . . .
    Subscribe Articles

    Just enter your email below to subscribe and receive weekly updates about the most interesting similar articles.

    You need to accept conditions to receive letters.
    You've Subscribed!

    Share article via

    . . .

    Explanation

    • Glob plays an important role here, we pass a string ‘./Modules/**/assets/js/**/*.js’ this string tells glob to search for .js file in assets/js directory inside Modules
    • Glob return each matched file path.
    • Then we replace .js extension as to define the path with the same name as our file name.
    • create entry.

    That’s all to create dynamic entry with WebPack.

    . . .

    Comments (2)

    Add Your Comment

  • Luke
    Hi, I have a question about the instructions you posted about installing the krunker hacks on google chrome. I am writing this comment in hopes that it directs you there to answer my question. It would be greatly appreciated. Have a great weekend.
    • Arjun Singh
      Krunker extension is not developed by WEBKUL they are using our post reference to show how to install unpack extension. For issues related to krunker, please communicate the author of the extension.
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close