在 Nginx 服务器和 webpack js 和 css 版本控制之外处理缓存

Question

我有一个在 EC2 上运行的 React nodejs 应用程序。

我已经在 Nginx 之外设置了 3 个实例用于负载平衡。

我还在 Nginx 配置中启用了缓存。

基本上所有内容都应该缓存在不同版本的 app.js 旁边，其中包含捆绑的 React 代码和同样捆绑的 style.css。

我想在 js 和 css src 链接中添加一个版本号（例如http://mywebsite.com/app.js?1.0）

我的问题是，我可以使用 webpack 自动执行此操作吗？这是要走的路吗？

Answer 1

html-webpack-plugin 是你的朋友。

不要创建 index.html 文件，而是让 webpack 为你做这件事。

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

module.exports = {

    entry: "./index.js",
    output: {
        filename: "./dist/app.bundle.[hash].js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            filename: './dist/index.html'
        })
   ]

}

这将自动将输出脚本添加到 index.html 中，并为文件生成哈希。