Webpack配置：如何忽略HTML文件名URL中的动态随机串？

首先得明确：HtmlWebpackPlugin只负责生成指定文件名的HTML文件，你当前的配置已经能正确产出index.html了。要让index.qwe123.html这类带随机串的URL都返回index.html，核心是配置服务器的路由重写规则——不管是开发环境用的webpack-dev-server，还是生产环境部署的服务器，都需要添加对应规则。

1. 开发环境配置（webpack-dev-server） #

在Webpack配置中补充devServer的重写规则：

module.exports = {
  // ...其他配置项
  devServer: {
    historyApiFallback: {
      rewrites: [
        // 匹配所有index.xxx.html格式的请求，转发到index.html
        { from: /^\/index\.[a-zA-Z0-9]+\.html$/, to: '/index.html' }
      ]
    }
  },
  plugins: [
    // 原HtmlWebpackPlugin配置无需修改
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, SOURCE_ROOT + '/static/index.html')
    })
    // ...其他插件
  ]
};

2. 生产环境部署配置 #

根据你使用的服务器类型添加规则：

• Nginx：在服务器配置文件中加入以下location规则

  location ~ ^/index\.[a-zA-Z0-9]+\.html$ {
    rewrite ^/index\.[a-zA-Z0-9]+\.html$ /index.html last;
  }
  

• Apache：在项目根目录的.htaccess文件中添加

  RewriteEngine On
  RewriteRule ^index\.[a-zA-Z0-9]+\.html$ /index.html [L]
  

补充说明 #

你的原HtmlWebpackPlugin配置完全不需要改动，它的职责就是生成正确的index.html文件。带随机串的URL能指向这个文件，靠的是服务器的重写规则来匹配并转发请求。

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