使用node命令运行项目出现.html扩展名无法识别错误如何解决？

根因说明 #

• 你的项目package.json中配置了"type": "module"，启用了Node原生ES模块规范，原生Node默认仅支持.js/.mjs/.cjs等后缀的模块导入，无法直接识别.html后缀的资源，因此会抛出扩展名不识别的错误。
• 你安装的html-loader、raw-loader均为Webpack专属加载器，仅在Webpack构建流程中生效，直接使用node命令执行代码不会触发这些Loader的资源处理逻辑。

对应解决方案 #

场景1：仅需要完成项目构建 #

你无需直接用node命令执行项目入口文件，直接调用已配置好的Webpack构建命令即可：

npm run build

执行后Webpack会自动处理.html资源导入，输出可部署的构建产物。

注意：请先确认你的webpack.config.js中已配置.html文件对应的Loader规则，参考配置如下：

module.exports = {
  // 其他原有配置
  module: {
    rules: [
      {
        test: /\.html$/i,
        // 若需要直接获取HTML原始字符串，可替换为raw-loader
        loader: 'html-loader'
      }
    ]
  }
}

场景2：需要本地开发实时调试 #

你需要补充本地开发服务配置，步骤如下：

1. 安装适配Webpack4的dev-server版本：

npm i webpack-dev-server@3 -D

2. 在package.json的scripts字段中新增启动命令：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --open"
}

3. 执行启动命令即可正常运行项目：

npm run dev

场景3：确有需求直接用node执行代码 #

如果你的业务场景需要直接用node执行项目代码，可以通过自定义Node加载钩子实现.html资源识别：

1. 新建加载钩子文件html-loader.js：

import { readFile } from 'fs/promises';
import { fileURLToPath } from 'url';

export async function load(url, context, defaultLoad) {
  if (url.endsWith('.html')) {
    const filePath = fileURLToPath(url);
    const htmlContent = await readFile(filePath, 'utf8');
    return {
      format: 'module',
      source: `export default ${JSON.stringify(htmlContent)}`
    };
  }
  return defaultLoad(url, context, defaultLoad);
}

2. 执行代码时指定加载钩子：

node --loader ./html-loader.js 你的项目入口文件路径.js

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