如何在Webpack中导入除JS、CSS、HTML外的所有文件作为资源？

你可以通过负向预查正则实现这个需求，不用逐个枚举需要匹配的扩展名，直接排除JS、CSS、HTML及其衍生格式（如TS、JSX、SCSS等）即可。

正则表达式写法 #

/\.(?!(js|jsx|ts|tsx|css|scss|sass|less|html|htm)$)[^\.]+$/

正则逻辑说明 #

• \.：匹配文件名里的扩展名分隔点
• (?!(js|jsx|ts|tsx|css|scss|sass|less|html|htm)$)：负向预查，确保当前扩展名不在排除列表内
• [^\.]+$：匹配除点之外的任意字符直到文件名结尾，捕获所有未被排除的扩展名

完整Webpack配置示例 #

//webpack.config.js
module.exports = {
  output: {
      assetModuleFilename: '[name].[contenthash][ext]',
  },

  module: {
      rules: [
        {
          test: /\.(?!(js|jsx|ts|tsx|css|scss|sass|less|html|htm)$)[^\.]+$/,
          type: 'asset/resource'
        },
      ],
  }
};

如果后续需要排除其他格式，直接在正则的排除列表里添加对应扩展名即可。比如要排除Vue单文件组件，可修改正则为/\.(?!(js|jsx|ts|tsx|css|scss|sass|less|html|htm|vue)$)[^\.]+$/。

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