webpack 5升级后import的html文件被包裹module.exports如何解决

该问题由两个变更共同导致：

• html-loader v2.0+ 版本默认开启esModule: true配置，会把HTML内容包裹成ES模块格式返回
• webpacker 6的默认loader规则和webpack 5原生的asset资源处理逻辑冲突，导致模块导出代码被当成纯文本二次返回

方案1：修改html-loader全局配置 #

webpacker 6的配置文件一般为config/webpack/base.js，先删除默认的html处理规则，再添加自定义配置：

// 先清空webpacker默认的html loader规则
environment.loaders.delete('html')

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        use: [
          {
            loader: 'html-loader',
            options: {
              // 关闭ES模块导出封装，直接返回处理后的文本
              esModule: false,
              // 如果不需要解析HTML内部的资源链接（如img的src），可以关闭sources减少处理逻辑
              sources: false
            }
          }
        ]
      }
    ]
  }
}

方案2：使用webpack 5原生asset/source处理（无需额外loader） #

如果不需要html-loader的资源解析能力，直接用webpack 5原生的静态资源规则，性能更高：

// 同样先删除默认html规则
environment.loaders.delete('html')

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        // 直接返回文件原始内容
        type: 'asset/source'
      }
    ]
  }
}

临时兼容方案（无需修改全局配置） #

安装raw-loader依赖后，导入时主动指定loader：

import template from 'raw-loader!./template.html'

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