#Webpack 中 import 加载路径变量

在 Webpack 项目里，如果 import 的路径完全由运行时变量拼出来，打包后往往会报「找不到模块」。本文记录从现象到原因的排查，以及 Webpack 实际支持的写法。

#背景

业务需要根据配置动态加载不同主题样式，写法大致如下：

const theme = "bd-theme";
import(`./theme/${theme}.less`);

本地开发或打包后访问时，资源加载失败：

查看 Webpack 打包产物可以发现，theme/bd-theme.less 并没有被打进 bundle：

因此运行时找不到文件——打包阶段根本没有把它当作依赖收集进来。

#原因分析

#import 是否支持路径变量？

从 ES 模块规范看，动态 import() 是支持的。但 Webpack 在静态分析阶段只能处理「部分可推导」的路径，并不会在运行时再去磁盘上扫目录。

Webpack 打包时会扫描源码里出现过的 import / require 路径，把能确定的文件加入依赖图。如果路径是纯变量，分析器在编译期无法知道最终会指向哪个文件，自然也就不会把对应资源打进产物：

// 编译期无法推导具体文件，Webpack 不会打包任何 ./theme/*.less
const name = getThemeName();
import(`./theme/${name}.less`);

#如何让 Webpack 识别路径变量？

对于「目录固定、文件名可变」这类场景，Webpack 会按类似正则的匹配规则提前收集候选文件。路径里需要保留静态的目录前缀和文件后缀，中间才放变量：

// 目录 ./theme/ 与后缀 .less 是静态的，Webpack 会打包该目录下所有匹配的 .less
const theme = "bd-theme";
import(`./theme/${theme}.less`);

对这个路径，Webpack 能推断出「可能要加载 ./theme/ 下的 .less 文件」，于是会把该目录下所有符合模式的文件一并打进 bundle，运行时再根据变量值取出对应模块。可以把它理解成一个预加载缓冲区：编译期把可能用到的文件都收进来，执行期再按实际路径命中。

如果目录层级也需要动态化，可以进一步收窄变量范围，或改用 require.context / import.meta.glob（Vite）等显式声明「要扫描哪些文件」的 API。

#小结

核心原则：给打包器留一点静态信息。路径里至少要有固定的目录或后缀，Webpack 才知道该把哪些文件纳入依赖图。