前端文件在進(jìn)行版本更迭時，會出現(xiàn)瀏覽器緩存造成的問題，具體描述為：

以下是我的webpack配置

module.exports = {
    entry: {
        dashboard: "./dev/CloudPlatform/index.js",
        logIn: "./dev/CloudPlatform/login.js",
        archives: "./dev/Archives/archives.js",
        "404": "./dev/ERROR/404.js",
        activateRP: "./dev/CloudPlatform/activateRP.js"
    },
    output: {
        path: path.resolve(__dirname, "build/js"),
        publicPath: "/js/",
        chunkFilename: "[name].[hash].js",
        filename: "[name]_v5.js"
    },
    externals: {
        jquery: "$",
        react: "React",
        "react-dom": "ReactDOM",
        "react-router": "ReactRouter"
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify("production")
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true
            },
            comments: false
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react"],
                        plugins: [
                            "transform-object-rest-spread",
                            "transform-class-properties"
                        ]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoader: 1
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: loader => [
                                require("autoprefixer")({
                                    browsers: [
                                        ">1%",
                                        "last 4 versions",
                                        "Firefox ESR",
                                        "not ie < 9" // React doesn't support IE8 anyway
                                    ],
                                    flexbox: "no-2009"
                                })
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: loader => [
                                require("autoprefixer")({
                                    browsers: [
                                        ">1%",
                                        "last 4 versions",
                                        "Firefox ESR",
                                        "not ie < 9" // React doesn't support IE8 anyway
                                    ],
                                    flexbox: "no-2009"
                                })
                            ]
                        }
                    },
                    "less-loader"
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            name: "../images/[name].[ext]"
                        }
                    },
                    {
                        loader: "image-webpack-loader",
                        options: {
                            progressive: true,
                            optimizationLevel: 7,
                            interlaced: false,
                            pngquant: {
                                quality: "65-90",
                                speed: 4
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "../font/[name].[ext]"
                        }
                    }
                ]
            }
        ]
    }
};

以index.html頁面為例，生成兩個版本的前端文件：
版本1：
filename可規(guī)定index.html頁面需要引入的入口js文件名稱，第一個版本可為index.html頁面生成index_v1.js入口文件,index頁面內(nèi)其他的按需加載的文件可生成名稱為[模塊名].[hash].js。(hash在每次打包后會改變)。

這時候在index.html中的body內(nèi)應(yīng)該是

<body>
    <div id="index"></div>
    <script src="/js/index_v1.js"></script>
</body>

版本2：
版本2內(nèi)的index頁面入口文件為index_v2.js,其中其他文件為[模塊名].[hash].js

這時候在index.html中的body內(nèi)應(yīng)該是

<body>
    <div id="index"></div>
    <script src="/js/index_v2.js"></script>
</body>

兩次打包后的文件名稱完全不一樣，但是當(dāng)版本二部署后，瀏覽器加載index.html頁面后，在控制臺中顯示頁面引入的js文件依然是index_v1.js而不會加載index_v2.js。這時候如果刷新瀏覽器，那么加載的文件又變?yōu)閕ndex_v2.js。

以上就是當(dāng)前小小鄙人遇到的問題。

對于瀏覽器緩存的問題，鄙人有這么點理解，簡單的說：

• 對于nginx中的文件，若文件名稱不變，內(nèi)容發(fā)生變化，這時候瀏覽器會使用緩存的文件，若文件名稱發(fā)生改變，就是請求的url發(fā)生改變，相當(dāng)于一個新的http請求，就會重新去請求文件。

這樣的理解應(yīng)該是對的，但是對于上述遇到的問題，則讓我對這個理解產(chǎn)生懷疑。

另外對于圖片緩存

瀏覽器的緩存可以通過 cache-control，max-age，expires。。。，一些參數(shù)去設(shè)置，網(wǎng)上的一些講解也非常明白，對于參數(shù)的理解也不是很難，但是這些參數(shù)在實際應(yīng)用中確很少談及，這些參數(shù)在那里設(shè)置呢，在html文件的 meta 標(biāo)簽中設(shè)置，還是在服務(wù)器中設(shè)置？一直都找不到答案。另外又如何做到對單個圖片進(jìn)行緩存控制呢？

以上實際提出了兩個問題：

1. 瀏覽器對文件的緩存為何會造成我這樣的問題，文件名更改卻還會尋找上個版本的文件
2. 瀏覽器緩存如何設(shè)置，圖片緩存能單獨設(shè)置嗎？

望各位大神指點指點，小白前端渴望得到你們答案，謝謝大家！