如何在JavaScript中导入.html文件？Cloudflare Worker项目导入报错求助

第一步：修正导入路径错误 #

你当前的导入语句写法有误，.test.html代表当前目录下名称以.开头的隐藏文件，如果你存放的HTML文件名为test.html，请先将导入语句修正为：

import test from './test.html'

修正后如果仍有报错，再根据你使用的项目构建工具选择对应方案：

方案1：使用 Wrangler 2/3 脚手架（官方默认推荐，无webpack.config.js） #

当前Cloudflare官方默认的Wrangler工具链原生支持静态资源导入，不需要额外配置webpack，只需要给导入路径加?raw后缀，标识需要将文件内容作为纯字符串导入即可：

import test from './test.html?raw'

修改后重启wrangler dev就能直接拿到HTML的字符串内容。

方案2：基于Webpack构建的旧项目 #

如果你的项目是旧版基于Webpack构建的Worker项目，可以手动新增配置文件：

1. 在项目根目录新建webpack.config.js文件
2. 写入如下配置，添加HTML文件的资源解析规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        type: 'asset/source'
      }
    ]
  }
}

3. 保存配置后重新启动项目开发服务即可生效。

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