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页的常用控制台日志

仅限Entry 1页面的特定控制台日志

entry2.html

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

浏览器的控制台输出：

第1和第2页的常用控制台日志

仅限Entry 2页面的特定控制台日志

有没有办法在example.js中有类似的内容？

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

因此，Webpack可以将entry1.js和entry2.js与其特定的帮助程序模块捆绑在一起！

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

谢谢！

Answer 1

您可以使用Modules Dynamic imports，但必须使用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();
  });
}

Webpack动态导入基于条目名称

1 个答案:

`example.js`

`helper.js`