在编译时将基于包名称的变量传递给 webpack 源

Question

我有一个场景，其中多个包具有相同的入口点，称为index.js

然后我在该文件中通过查看env变量对各个子模块进行动态导入：

await import("api/" + process.env.API")

这样做的问题是 webpack 会将所有文件捆绑在api/因为它在编译时无法知道该动态值是什么。

process.env.API的值实际上与包的名称相同。 所以我尝试使用 webpack 的神奇注释功能来让它工作：

await import(
/* webpackInclude: [name] */
"api/" + process.env.API")

但根据文档，占位符仅用于块名称，而不用于包含/排除功能。

我还尝试使用带有回调的上下文替换插件，但上下文回调不包含有关包名称的信息。

是否有可能以某种方式定义一个插件或配置一个在编译时将被解析为包名称的值？

Answer 1

如果您使用 dynamicImport 语法，您通常会生成单独的块。 据我了解您的问题，您想根据动态路径变量命名这些块吗？

一种方法是import(/* webpackChunkName: "[request]" */ 'api/${process.env.API')

编辑

动态块名称似乎是在运行时生成的（至少我是这样向自己解释的），这就是环境变量可能不可用的原因。 将您的 .env 变量保存在一个 JS 变量中并像这样加载您的动态导入：

const api = process.env.API;
const module = await import(/* webpackChunkName: "[request]" */ 'api/${api}');

这将正确输出仅包含与路径对应的模块的名称块。

编辑 2（来自 OP）

我在使用错误的插件时也遇到了 babel 问题，这导致 webpack 将import语句转换为require 。 解决使用： @babel/plugin-syntax-dynamic-import