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

【问题标题】：Pass variable based on bundle name to webpack source at compile time在编译时将基于包名称的变量传递给 webpack 源
【发布时间】：2019-08-24 06:00:08
【问题描述】：

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

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

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

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

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

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

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

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

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

【问题讨论】：

【解决方案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 statments 转换为 require。使用解决： @babel/plugin-syntax-dynamic-import

【讨论】：

不完全是。我遇到的问题是api 下的所有资源都捆绑了所有入口点。入口点和对应的/api/{name} 资源之间存在一对一的关系。所以这将创建不必要的代码，这些代码永远不会为所有包运行
@Richard 我自己刚刚尝试过并更新了我的答案