如何配置JS蓝绿部署？

蓝绿部署通过并行运行新旧版本实现无缝更新，前端以index.html为入口，结合版本化构建（如webpack生成带contenthash的文件），在CDN或服务器切换流量指向，确保更新时用户无感知，出错可快速回滚。

JS蓝绿部署，简单来说，就是让你的网站或应用在更新时，用户感觉不到任何停顿。它通过巧妙地切换新旧版本的代码路径，比如在CDN或Web服务器上做个指向切换，来达到平滑过渡的目的。

JS蓝绿部署的核心思路，其实就是你每次发布新版本，不是直接覆盖旧的，而是先准备好一套全新的“绿色”环境，等确认没问题了，再把流量悄悄地切换过去。这样，即便新版本有问题，也能立马切回“蓝色”的旧版本，用户几乎无感知。

具体到前端（尤其是单页应用SPA），这个“切换”通常围绕

index.html

文件展开，因为它是应用的入口。

1. 版本化构建： 我们每次构建项目时，都会给输出的JS、css文件加上独特的哈希值（例如

   app.1234abcd.js

   ）。这确保了新旧文件不会因为浏览器缓存而混淆。同时，

   index.html

   会引用这些带哈希值的新文件。

   // webpack.config.js 示例 output: {     filename: '[name].[contenthash].js',     chunkFilename: '[name].[contenthash].js',     path: path.resolve(__dirname, 'dist'), }, plugins: [     new HtmlWebpackPlugin({         template: './public/index.html',         filename: 'index.html', // 这个是关键，后面会用     }), ],