为何Webpack动态导入时不匹配资源处理规则？

根因 #

静态导入时Webpack会按配置规则匹配处理，但动态导入的默认行为是把目标文件当作模块打包成独立chunk，会跳过asset/resource规则，导致你的配置仅在静态导入场景生效。

快速解决 #

在动态导入的魔法注释里添加webpackAsset: true，明确告诉Webpack将该文件作为资源而非模块处理：

const workerSrc = await import(
  /* webpackChunkName: "external-package-worker" */
  /* webpackAsset: true */
  "@externalpackage/worker.min.js"
);

备选方案 #

如果上述方法未生效，可给Webpack规则添加enforce: "pre"，强制该规则优先执行，避免被其他模块解析规则抢占：

{
  test: /externalpackage.+worker(\.min)?\.js$/i,
  type: "asset/resource",
  enforce: "pre"
}

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