时间戳

首页 > 解决方案 > 在编译时将基于包名称的变量传递给 webpack 源

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

问题描述

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

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

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

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

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

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

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

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

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

标签： node.jswebpackdynamic-importwebpack-plugin

解决方案

如果您使用的是 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 将importstatments 转换为require. 使用解决： @babel/plugin-syntax-dynamic-import

推荐阅读