用于文件、子文件的 Webpack 加载器并将它们添加到跟踪列表答案

【问题标题】：Webpack loader for file, subfiles and add them to tracking list用于文件、子文件的 Webpack 加载器并将它们添加到跟踪列表
【发布时间】：2021-05-10 02:09:06
【问题描述】：

我在第 3 方应用程序中创建了地图+tilemap 项目。整个项目是一组文件，主文件（XML）代表2D游戏关卡地图，其他一些文件（子文件）代表图形和瓦片地图。

我正在尝试创建一个 Webpack 加载器，它将编译整个地图/tilemap 项目并将其转换为 JSON 对象，以便在 javascript 中使用。而且我仍然不知道如何：

如何访问子文件（取自主文件的相对路径），如何访问当前目录（主文件所在的位置），以及主文件的名称？
我如何向 Webpack 解释以跟踪所有子文件中的更改，以便它会再次自动运行加载器以编译整个地图/tilemap 项目（部分重新打包）。

我花了 2 天时间寻找任何可行的解决方案，这有可能吗？

非常感谢！

【问题讨论】：

“我正在尝试创建一个 Webpack 加载器，它将编译整个地图/tilemap 项目并将其转换为 JSON 对象”。你为什么要尝试使用装载机呢？加载器处理导入依赖图。也许插件是更好的选择。

标签： javascript node.js webpack webpack-dev-server webpack-loader

【解决方案1】：

对于第一个问题，webpack loader 是通过this 公开文件信息，你可以这样做：

module.exports = function (source) {
  const loaderContext = this;
  const { sourceMap, rootContext, resourcePath } = loaderContext;
  const sourceRoot = path.dirname(path.relative(context, resourcePath));
  ...
}

对于第二个问题，我认为也许您可以使用module.hot 来跟踪子文件的更改，如下所示：

if (module.hot) {
  module.hot.accept('filepath', ()=>{
    ...
  })
}

【讨论】：