如何配置webpack使HTML内的inline代码被html-webpack-plugin正确解析

你使用的项目模板默认配置中，html文件的加载逻辑会把<%类的模板语法直接转义为普通文本，不会交给html-webpack-plugin的内置ejs解析器处理，所以语法片段直接渲染到了页面上。同时你当前的HtmlWebpackPlugin配置也没有传入isProd参数，即使语法能解析也无法拿到对应的判断值。

• 第一步：先在webpack配置中定义生产环境标识，并传入HtmlWebpackPlugin的模板参数
  首先找到你声明HtmlWebpackPlugin的配置文件，先定义环境判断变量，再修改插件配置：

// 可根据你项目的环境变量规则调整判断逻辑，大部分项目的生产环境NODE_ENV值为production
const isProd = process.env.NODE_ENV === 'production'

new HtmlWebpackPlugin({
  template: Path.resolve(__dirname, '../src/index.html'),
  filename: 'index.html',
  // 新增模板参数，将变量传递给模板文件
  templateParameters: {
    isProd: isProd
  }
}),

• 第二步：让模板语法正常被解析，推荐两种方案任选其一即可

方案一（推荐，无兼容问题）：修改模板文件后缀为ejs #

html-webpack-plugin默认支持ejs语法解析，只要将模板后缀改为ejs就会自动绕过html-loader的转义逻辑，无需修改loader配置：

1. 将src/index.html重命名为src/index.ejs
2. 修改HtmlWebpackPlugin的template配置指向新的文件：

new HtmlWebpackPlugin({
  template: Path.resolve(__dirname, '../src/index.ejs'),
  filename: 'index.html',
  templateParameters: {
    isProd: isProd
  }
}),

方案二（不改文件名）：修改html-loader配置开启插值 #

如果不想修改模板后缀，找到webpack配置中处理.html文件的规则，给html-loader添加插值允许配置：

{
  test: /\.html$/,
  use: [
    {
      loader: 'html-loader',
      options: {
        // html-loader v4以下版本用这个参数
        interpolate: true,
        // 如果是v4及以上版本，替换为下面的参数
        // sources: {
        //   interpolation: true
        // }
      }
    }
  ]
}

配置修改完成后重启webpack服务，模板语法就会被正常解析，不会直接输出到页面。

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