Webpack Encore无法导入本地依赖的配置方案咨询

你遇到的问题是因为Webpack Encore默认只会查找npm安装的依赖和相对路径的文件，而你的主题模块（Site、Base等）是自定义的非npm模块，所以需要配置模块别名来告诉Webpack这些模块的实际位置——这和你传统Webpack里的resolve.alias配置思路完全一致，Encore也提供了对应的方法来实现。

具体配置步骤 #

1. 引入path模块：在你的webpack.config.js顶部先引入Node.js的path模块，用来解析绝对路径：

const path = require('path');

2. 定义主题模块的根路径：为了方便配置，先定义一个变量指向你的主题模块所在的文件夹（也就是./theme/es）：

const themeModuleRoot = path.resolve(__dirname, './theme/es');

3. 用configureResolve配置别名：在Encore的配置链中添加configureResolve方法，把你的模块别名配置进去：

Encore
  // 你的现有配置，比如：
  .addEntry('app', './theme/js/scripts.js')
  // ...其他Encore配置（比如.setOutputPath、setPublicPath等）

  // 添加这部分核心配置
  .configureResolve((resolve) => {
    resolve.alias = {
      // 保留Encore默认的别名配置（比如@之类的，如果有的话）
      ...resolve.alias,
      // 逐个添加你的主题模块别名
      Site: path.resolve(themeModuleRoot, 'Site.js'),
      Base: path.resolve(themeModuleRoot, 'Base.js'),
      Menubar: path.resolve(themeModuleRoot, 'Menubar.js'),
      Sidebar: path.resolve(themeModuleRoot, 'Sidebar.js'),
      PageAside: path.resolve(themeModuleRoot, 'PageAside.js'),
      // 其他需要的模块别名都可以在这里添加
    };

    // 如果你需要额外的扩展名支持，可以在这里添加（Encore默认已经支持.js等常见扩展名）
    // resolve.extensions.push('.js');
  })

为什么这样有效？ #

Encore的configureResolve方法就是专门用来让你自定义Webpack的resolve配置的，它会把你传入的配置和Encore默认的resolve配置合并，这样Webpack就知道当你import * as Site from 'Site'时，应该去./theme/es/Site.js这个路径查找文件，而不是去npm依赖里找。

注意事项 #

• 确保themeModuleRoot的路径是正确的，你可以用console.log(themeModuleRoot)打印出来检查是否指向了正确的文件夹。
• 如果你的主题模块有很多，不想逐个手动添加别名，也可以用Node.js的fs模块遍历./theme/es文件夹自动生成别名，但手动配置对于数量不多的模块来说更简单可靠。

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