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

Question

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

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

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

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

process.env.API的值其实和bundle的名字一样。所以我尝试使用 webpack 的神奇评论功能来让它工作：

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

但是根据文档，占位符仅用于块名称而不用于 include/exclude 功能。

我也尝试过将上下文替换插件与回调一起使用，但上下文回调不包含有关包名称的信息。

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

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

Pass variable based on bundle name to webpack source at compile time