webpack - 在 Webpack 5 中禁用资源捆绑

Question

当我在 Webpack 5 中引用 Assets 时，它默认会创建它的副本。例如，./assets/fonts/myfont.woff2 中的字体文件被复制到 ./b27297c148a7ef314ce2.woff2，这在使用源文件夹和 dist 文件夹时非常有用。但是，我需要使用源文件和捆绑的 css 文件中的相同资源目录。有没有办法禁用文件复制并仅根据捆绑输出文件的目标更新资源文件的路径？

更新:

我已成功将复制目标设置为与我的资源文件的源目标相同:

/*webpack.config.js*/
module.exports = {
  output: {
    assetModuleFilename: '[file]'
  },
};

但是，这并不理想，因为所有文件都会被自身覆盖。

Answer 1

我找到了以下解决方案。在此示例中，/asset 文件夹内的所有文件均保留在适当位置:

/*webpack.config.js*/

module.exports = {
  module: {
    rules: [
      {
        test: /^assets\/.*$/i,
        type: 'asset/resource',
        /* do not emit copies of files */
        generator: {
          emit: false
        }
      },
    ],
  },
  output: {
    /* use original file-path in generated output files */
    assetModuleFilename: '[file]'
  },
};

不幸的是我在官方文档中没有找到任何相关内容，答案基于:https://github.com/webpack/webpack/pull/12871

由于某种原因，这似乎不适用于启用了watch选项的情况 (使用 webpack 5.44.0 和 webpack-cli 4.7.2 进行测试。)