Webpack+Blendid项目模块子目录加载失败问题咨询

首先看报错信息，核心是hoverEnlarge.js里第3行导入的animejs/index.js找不到——这说明你把模块移到子目录后，模块内部的相对路径引用没同步更新，导致Webpack从新的子目录位置出发，找不到上层的animejs文件了。

下面是针对性的解决步骤：

1. 先修复模块内的相对导入路径 #

打开js/modules/hover/hoverEnlarge.js，找到导入animejs的那一行（报错里的第3行），把相对路径改成从当前子目录出发的正确路径：

• 原来在modules/目录时，路径可能是../animejs/index.js
• 现在移到modules/hover/，需要多退一层，改成../../animejs/index.js

修改后代码示例：

import anime from '../../animejs/index.js';

2. 确认模块自动导入机制支持子目录 #

Blendid默认的modules/index.js是用require.context自动扫描导入模块的，你需要确保它配置了递归扫描子目录。打开src/javascripts/modules/index.js，检查代码是否类似：

const requireModule = require.context('./', true, /\.js$/);
// 第二个参数`true`表示递归扫描所有子目录，这是关键

requireModule.keys().forEach((fileName) => {
  // 这里需要注意moduleName的生成逻辑：
  // 如果子目录结构是`hover/hoverEnlarge.js`，默认会生成`hover/hoverEnlarge`作为模块名
  // 如果你想保持HTML里的`data-module="hoverEnlarge"`不变，就修改成只提取文件名：
  const moduleName = fileName.split('/').pop().replace(/\.js$/, '');
  
  window[moduleName] = requireModule(fileName).default;
});

确保require.context的第二个参数是true，同时根据你的需求调整moduleName的生成逻辑——这样不管模块放在哪个子目录，HTML里的data-module属性值都不用改。

3. 可选：配置Webpack别名避免深层相对路径 #

如果不想每次移动模块都改相对路径，可以给常用目录配置Webpack别名。在项目根目录创建webpack.config.js（没有的话直接新建），添加如下配置：

const path = require('path');

module.exports = (config) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    '@anime': path.resolve(__dirname, 'src/javascripts/animejs'),
    '@modules': path.resolve(__dirname, 'src/javascripts/modules'),
  };
  return config;
};

之后在hoverEnlarge.js里就可以用别名导入：

import anime from '@anime/index.js';

这样不管模块放在哪个子目录，路径都不会出错。

最后验证修复 #

改完以上配置后，重启Blendid的开发服务（npm start），刷新页面检查模块是否正常实例化，同时查看控制台是否还有报错。

内容的提问来源于stack exchange，提问作者R M