如何无需频繁修改script标签加载带哈希文件名的Webpack Bundles？

我明白你的需求——不想每次打包后手动修改index.html里的script标签，希望写死/app.js就能自动加载带哈希的实际bundle。除了HtmlWebpackPlugin，确实有不少可行的方案，我先帮你排查下webpack-manifest-plugin的问题，再给你其他替代思路：

一、修复webpack-manifest-plugin的使用（你之前可能配置有误） #

这个插件的核心是生成一个manifest.json文件，映射原始文件名和带哈希的实际文件名，之后你需要通过前端动态加载或者后端重定向来实现映射。

1. 正确配置Webpack #

首先确保你的Webpack配置里正确引入并配置插件：

const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: '[name].[contenthash].js', // 生成带哈希的文件名
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 很重要，确保manifest里的路径是正确的
  },
  plugins: [
    new ManifestPlugin({
      fileName: 'manifest.json',
      publicPath: '/' // 和output.publicPath保持一致
    })
  ]
};

打包后，dist目录下会生成类似这样的manifest.json：

{
  "app.js": "/app.a76gs0ad5dh45sdh9aa.js"
}

2. 两种方式利用manifest实现映射 #

方式A：前端动态加载脚本

如果是纯静态页面部署，没有后端支持，可以在index.html里写一段小脚本，读取manifest.json并动态插入正确的script标签：

<!-- index.html里不用写具体的带哈希的script，只保留这段逻辑 -->
<script>
  fetch('/manifest.json')
    .then(res => res.json())
    .then(manifest => {
      const script = document.createElement('script');
      script.src = manifest['app.js'];
      script.defer = true; // 保持原来的加载顺序
      document.body.appendChild(script);
    })
    .catch(err => console.error('Failed to load manifest:', err));
</script>

方式B：后端重定向（推荐有后端的场景）

如果你的项目有后端服务（比如Node.js/Express、Java Spring等），可以让后端读取manifest.json，当用户请求/app.js时，自动重定向到对应的带哈希文件。

以Node.js Express为例：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 读取manifest文件
const manifestPath = path.join(__dirname, 'dist/manifest.json');
const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));

// 处理/app.js的请求，重定向到带哈希的文件
app.get('/app.js', (req, res) => {
  const hashedPath = manifest['app.js'];
  if (hashedPath) {
    res.redirect(hashedPath);
  } else {
    res.status(404).send('Bundle not found');
  }
});

// 静态托管dist目录
app.use(express.static('dist'));

app.listen(3000, () => console.log('Server running on port 3000'));

这样你在index.html里写<script src="/app.js"></script>就完全没问题了。

二、Nginx重写规则（适合纯静态部署+Nginx托管） #

如果你的项目是用Nginx部署的纯静态资源，可以直接在Nginx配置里加rewrite规则，让请求/app.js自动匹配到最新的带哈希的bundle：

server {
  listen 80;
  root /path/to/your/dist;

  # 匹配/app.js请求，重写到带哈希的app文件
  location /app.js {
    rewrite ^/app.js$ /app\.[a-f0-9]+\.js last;
    # 更精确的正则可以写：^/app\.js$ /app\.[0-9a-f]{16}\.js last;
  }
}

这个方案不需要任何前端或Webpack额外配置，完全靠Nginx的路由规则实现映射。

三、固定入口加载动态bundle #

可以创建一个不带哈希的“启动文件”（比如boot.js），让它负责加载实际的带哈希的业务bundle。这样index.html里只需要引入固定的/boot.js即可。

1. Webpack配置 #

const path = require('path');

module.exports = {
  entry: {
    boot: './src/boot.js', // 固定文件名的启动文件
    app: './src/app.js' // 带哈希的业务文件
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  optimization: {
    // 确保boot.js的文件名不带哈希
    splitChunks: {
      cacheGroups: {
        boot: {
          name: 'boot',
          test: /boot\.js$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
};

2. boot.js代码 #

在启动文件里动态加载业务bundle：

// 动态加载带哈希的app bundle
import('./app.js')
  .then(module => {
    // 这里可以初始化你的应用
    module.init();
  })
  .catch(err => console.error('Failed to load app bundle:', err));

然后index.html里只需要写：

<script src="/boot.js"></script>

总结 #

• 如果有后端服务：优先用webpack-manifest-plugin + 后端重定向，逻辑清晰且维护方便；
• 纯静态部署+Nginx：用Nginx rewrite规则，零前端代码改动；
• 纯静态无后端：用manifest+前端动态加载脚本或者固定启动文件方案。

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