处理缓存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是你的朋友。

不要创建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中，并为该文件生成一个哈希值。