基于条目名称的 Webpack 动态导入

Question

我试图让 Webpack 根据入口文件捆绑特定文件。

我的项目中有多个入口文件。它们都使用通用的辅助函数（单独的模块），但一些入口文件使用了稍微修改的版本。

这是我到目前为止所做的：

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" />

浏览器的控制台输出：

条目 1 和 2 页面的公共控制台日志

仅条目 1 页面的特定控制台日志

---

entry2.html

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

浏览器的控制台输出：

条目 1 和 2 页面的公共控制台日志

仅条目 2 页面的特定控制台日志

---

有没有办法在里面有这样的东西example.js？

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

因此，Webpack 可以捆绑entry1.js并entry2.js与其特定的帮助模块！

而且，这样，我希望摆脱我和文件中的可怕之处 。window.__CONTEXT__HTMLJS

谢谢！

Answer 1

您可以使用模块动态导入，但必须使用承诺：

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();
  });
}