如何在Webpack中让html-webpack-plugin模板避开raw-loader

嘿，我刚好碰到过类似的场景，给你分享下怎么搞定这个问题～

核心思路就是让devTemplate.html跳过raw-loader的处理，这样html-webpack-plugin就能用它默认的ejs loader来解析这个模板文件了，具体步骤如下：

1. 修改Webpack的module规则，排除目标模板文件 #

找到你配置raw-loader的地方，给这个规则加上exclude选项，明确排除devTemplate.html：

module: {
  rules: [
    {
      test: /\.html$/,
      use: 'raw-loader',
      // 用正则匹配排除devTemplate.html
      exclude: /devTemplate\.html$/
    }
    // 其他规则...
  ]
}

这样Webpack就不会用raw-loader处理这个特定的模板文件了，会把它留给html-webpack-plugin来处理。

2. 确保html-webpack-plugin的模板配置正确 #

确认你的html-webpack-plugin配置里，template字段指向的是正确的devTemplate.html路径，比如：

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

plugins: [
  new HtmlWebpackPlugin({
    template: './src/devTemplate.html', // 替换成你的实际文件路径
    filename: 'index.html', // 输出的HTML文件名
    // 其他可选配置，比如inject: 'body'、minify等
  })
]

因为我们已经排除了raw-loader对这个文件的处理，html-webpack-plugin会自动使用它内置的ejs loader来解析模板里的变量（比如<%= htmlWebpackPlugin.options.title %>这类语法），不会再把模板内容原封不动复制到输出文件里了。

额外注意点 #

• Webpack 2的规则是按顺序匹配的，所以要确保这个带exclude的raw-loader规则在其他HTML相关规则的前面，避免被其他规则提前匹配。
• 如果你之前给html-webpack-plugin指定过loader选项，记得去掉它，让插件使用默认的ejs loader即可。

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