javascript - 处理缓存 beyong 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 是你的 friend 。

无需创建 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 中，并为该文件生成哈希值。