Question

我有一个场景，其中多个捆绑包具有相同的入口点，称为yum install -y gcc openssl redhat-rpm-config && yum-config-manager --disable ol7_latest && yum install -y python36 python36-devel python36-setuptools && pip3 install -r requirements.txt && python3 setup.py install

然后我通过查看index.js变量，对该文件内的各个子模块进行动态导入：

env

此问题是，由于webpack在编译时不知道该动态值是什么，因此webpack将捆绑await import("api/" + process.env.API")下的所有文件。

api/的值实际上与捆绑包的名称相同。因此，我尝试使用webpack的魔术注释功能使其正常工作：

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）

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

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

1 个答案: