如何让webpack-html-plugin配合CompressionPlugin使用压缩脚本？

我来帮你搞定这个插件搭配的问题——你已经成功用CompressionPlugin生成了.gz格式的压缩脚本，但html-webpack-plugin还是默认插入未压缩的原文件路径，对吧？下面给你两种直接可行的解决方案：

方案1：手动控制模板中的脚本引用（最简单直接） #

这个方法完全由你掌控模板里的脚本路径，步骤很清晰：

1. 先修改HtmlWebpackPlugin的配置，添加inject: false禁用自动注入脚本的功能：

new HtmlWebpackPlugin({
  template: './src/index.html', // 你的模板路径
  inject: false // 禁止自动插入脚本和样式
})

2. 然后在你的index.html模板里，手动遍历webpack生成的chunks，输出带.gz后缀的预加载标签和脚本标签：

<!-- 预加载压缩后的脚本 -->
<% Object.keys(htmlWebpackPlugin.files.chunks).forEach(chunk => { %>
  <link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>.gz" as="script">
<% }) %>

<!-- 引入压缩后的脚本文件 -->
<% Object.keys(htmlWebpackPlugin.files.chunks).forEach(chunk => { %>
  <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>.gz"></script>
<% }) %>

这样生成的HTML里就只会出现指向.gz压缩文件的脚本标签，完全符合你的需求。

方案2：用自定义插件自动替换脚本路径（保留自动注入逻辑） #

如果你不想改动模板的注入逻辑，也可以写一个极简的自定义webpack插件，让它在html生成完成后自动替换脚本路径：

在你的webpack配置文件中添加这个自定义插件：

// 自定义插件：把HTML里的脚本路径替换为.gz版本
class ReplaceScriptWithGzipPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('ReplaceScriptWithGzipPlugin', (compilation) => {
      // 监听html-webpack-plugin的模板执行完成钩子
      require('html-webpack-plugin').getHooks(compilation).afterTemplateExecution.tapAsync(
        'ReplaceScriptWithGzipPlugin',
        (data, callback) => {
          // 替换所有script标签的src属性，加上.gz后缀
          data.html = data.html.replace(/<script[^>]+src="([^"]+)"/g, (match, originalSrc) => {
            return match.replace(originalSrc, `${originalSrc}.gz`);
          });
          callback(null, data);
        }
      );
    });
  }
}

// 然后在plugins数组里添加这个插件
plugins: [
  new HtmlWebpackPlugin({ /* 你原来的HtmlWebpackPlugin配置 */ }),
  new CompressionPlugin({
    asset: "[path].gz[query]",
    algorithm: "gzip"
  }),
  new ReplaceScriptWithGzipPlugin() // 加入这个自定义插件
]

这个插件会在html-webpack-plugin生成好HTML内容后，自动把所有script标签的src路径加上.gz后缀，既保留了自动注入的便利，又能使用压缩后的文件。

重要提醒 #

不管用哪种方案，都要确保你的服务器配置正确：需要给.gz文件设置Content-Encoding: gzip的响应头，否则浏览器无法正确解析这些压缩文件哦。

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