使用EJS include结合Webpack编译失败，求调试建议

我看到你在使用HtmlWebpackPlugin时，用EJS的<%- include('partial') -%>引入子模板触发了编译错误，移除include语句就可以正常运行。这个问题的核心是HtmlWebpackPlugin默认使用lodash模板引擎处理EJS文件，而非标准EJS语法，导致include语句无法被正确解析。

下面是具体的修复步骤：

1. 安装ejs-loader #

首先需要安装专门处理EJS文件的loader，让Webpack能正确解析EJS的include语法：

npm install ejs-loader --save-dev

2. 修改Webpack配置，添加EJS loader规则 #

在webpack.config.js的module.rules中添加对.ejs文件的处理规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...已有的规则
      {
        test: /\.ejs$/,
        use: 'ejs-loader'
      }
    ]
  },
  // ...其他配置
}

3. 调整HtmlWebpackPlugin的模板配置 #

强制HtmlWebpackPlugin使用ejs-loader来处理你的模板文件，修改plugins中的HtmlWebpackPlugin配置：

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

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: '!!ejs-loader!./index.ejs' // 用!!强制跳过默认loader，使用ejs-loader
    })
  ]
}

原理说明 #

HtmlWebpackPlugin默认会用内置的loader处理模板，这个loader基于lodash模板，不支持标准EJS的include语法。通过指定!!ejs-loader!./index.ejs，我们强制Webpack使用ejs-loader来解析模板，这样EJS的include语句就能被正确识别和编译了。

完成以上修改后，重新运行npm start，应该就能正常编译，partial.ejs的内容也会被正确引入到最终的index.html中。

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