Question

我正在为我的web应用程序使用webpack，部分代码（api代码）存储在./src/config/api中该文件夹以名为@myorg/api的npm软件包发布，我在其他项目中也使用了该文件夹：

import * from '@myorg/api';

所有这些项目都注入到我有shared.js块的同一页面中总是先加载，而我只想加载一次此api代码。

我的问题是webpack为我的web应用程序创建了以下内容：

var api_1 = __webpack_require__(/*! @myorg/api */ "./src/config/api/index.js");

但是使用它的项目有： var api_1 = __webpack_require__(/*! @myorg/api */ "./node_modules/@myorg/config/api/index.js");

因此，由于密钥不同，因此Webpack无法从我的shared.js块中找到该模块：

bootstrap:779 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (bootstrap:779)
    at fn (bootstrap:147)
    ...

知道我如何匹配这些ID吗？每个项目都使用其自己的webpack配置，并且该模块以npm软件包的形式安装（期望webapp包含在代码中）。

Answer 1

这对我有用：

export const mapModuleIds = fn => compiler => {
  const context = compiler.options.context;

  compiler.hooks.compilation.tap("ChangeModuleIdsPlugin", compilation => {
    compilation.hooks.beforeModuleIds.tap("ChangeModuleIdsPlugin", modules => {
      const chunkGraph = compilation.chunkGraph
      for(const module of modules)
        if(module.libIdent){
          const origId = module.libIdent({ context })
          if(!origId) continue;
          chunkGraph.setModuleId(module, fn(origId, module))
        }
    })
  })
}

然后将其添加为插件，如下所示：

const webpackOptions = {
  // ...
  plugins: [
    // ...
    mapModuleIds(id => /* transform the id */),
    // ...
  ]
  // ...
}

Webpack更改模块ID

1 个答案: