Webpack 根据入口名动态导入答案

【问题标题】：Webpack dynamic import based on entry nameWebpack 根据入口名动态导入
【发布时间】：2020-04-25 22:00:02
【问题描述】：

我正在尝试让 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 与其特定的帮助模块捆绑在一起！

这样，我希望在我的HTML 和JS 文件中摆脱可怕的 window.__CONTEXT__。

谢谢！

【问题讨论】：

你能分享你的回购吗？
我以前在 CRA 做过这类工作。如果你分享 repo 那么我会做 webpack 依赖的解决方案

标签： javascript webpack

【解决方案1】：

您可以使用Modules Dynamic imports，但您必须使用承诺：

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

【讨论】：