Webpack中使用HTML Partials时出现[object Module]问题求助

你的当前方案可修复，问题出在ES模块导出 #

你看到的[object Module]是因为html-loader从v4版本开始默认启用ES模块导出模式，而require()是CommonJS语法，拿到的是模块对象而非直接的HTML字符串。修复方式有两种：

方式1：修改require语句，读取模块的default导出 #

把原来的引入代码改成：

<%= require('html-loader!./assets/html/header.html').default %>

方式2：在Webpack配置中关闭html-loader的ES模块模式 #

在webpack.config.js里添加html-loader规则，设置esModule: false，让require()直接返回HTML字符串：

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              esModule: false
            }
          }
        ]
      }
    ]
  }
}

配置后，原来的<%= require('html-loader!./assets/html/header.html') %>就能正常渲染片段，甚至可以去掉html-loader!前缀，直接写<%= require('./assets/html/header.html') %>。

更简便的替代方案：用html-webpack-plugin配合模板引擎 #

如果要更优雅地管理通用片段和页面模板，推荐结合html-webpack-plugin和EJS模板引擎：

1. 安装依赖：

npm install html-webpack-plugin ejs-loader --save-dev

2. 调整Webpack配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.ejs$/,
        use: 'ejs-loader'
      }
    ]
  },
  plugins: [
    // 首页配置
    new HtmlWebpackPlugin({
      template: './src/index.ejs',
      filename: 'index.html'
    }),
    // 其他页面可复制配置修改路径
    new HtmlWebpackPlugin({
      template: './src/about.ejs',
      filename: 'about.html'
    })
  ]
}

3. 编写模板文件（如index.ejs）：

<!-- 引入通用页头 -->
<% include ./assets/html/header.html %>

<!-- 页面专属内容 -->
<h1>首页内容</h1>

<!-- 引入通用页脚 -->
<% include ./assets/html/footer.html %>

这种方式语法直观，无需复杂的require语句，既能全局复用通用片段，也能轻松为不同页面配置专属模板。

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