Webpack dynamic import based on entry name

Question

I'm trying to have Webpack to bundle specific files depending on the entry file.

I have multiple entry files in my project. They all use common helpers functions (separate modules), but some entry files use a slightly modified version.

Here's what I've done so far:

entry1.js

import helper from './helper';

helper();

---

entry2.js

import helper from './helper';

helper();

---

helper.js

import example from './example';

export default function helper() {
  console.log('common console log for Entry 1 and 2 pages');

  example();
}

---

example.js

const context = window.__CONTEXT__;

export default require(`./example_${context}`).default;

---

example_entry1.js

export default function() {
  console.log('specific console log for Entry 1 page only');
};

---

example_entry2.js

export default function() {
  console.log('specific console log for Entry 2 page only');
};

---

entry1.html

<script>
  window.__CONTEXT__ = 'entry1';
</script>
<script src="entry1.js" />

Browser's console output:

common console log for Entry 1 and 2 pages

specific console log for Entry 1 page only

---

entry2.html

<script>
  window.__CONTEXT__ = 'entry2';
</script>
<script src="entry2.js" />

Browser's console output:

common console log for Entry 1 and 2 pages

specific console log for Entry 2 page only

---

Is there a way to have something like this in example.js?

export default require(`./example_${__CURRENT_ENTRY_FILENAME__}`).default;

So, Webpack can bundle entry1.js and entry2.js with their specific helper modules!

And, that way, I'm hoping to get rid of the terrible window.__CONTEXT__ in my HTML and JS files.

Thanks!

Answer 1

You can use Modules Dynamic imports but you'll have to use promises:

example.js

exports default (moduleName) => import(`./example_${moduleName}`);

helper.js

import example from './example';

export default function helper() {
  example(__CURRENT_ENTRY_FILENAME__).then((module) => {
    console.log('common console log for Entry 1 and 2 pages');

    module.default();
  });
}