webpack学习（十七）：缓存

demo地址: https://github.com/Lkkkkkkg/webpack-demo
继上一次使用 process.env.NODE_ENV 区别生产模式和开发模式: https://blog.csdn.net/qq593249106/article/details/84970525

关于缓存

我们使用 webpack 来打包我们的模块化后的应用程序，webpack 会生成一个可部署的 /dist 目录，然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到服务器上，客户端（通常是浏览器）就能够访问网站此服务器的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存 的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很棘手。

所以通过使用 output.filename 进行文件名替换，可以确保浏览器获取到修改后的文件。[hash] 替换可以用于在文件名中包含一个构建相关(build-specific)的 hash，但是更好的方式是使用 [chunkhash] 替换，在文件名中包含一个 chunk 相关(chunk-specific)的哈希，但是开发模式下不支持使用 chunkhash，所以需要根据process.env.NODE_ENV标识符区分生产模式还是开发模式：
webpack.common.js

output: { //公共output
        path: path.join(__dirname, '../dist'),
        filename: process.env.NODE_ENV ? 'js/[name].[chunkhash].js' : 'js/[name].js', //根据入口文件分为不同出口文件
}

webpack.prod.js

plugins: [
        new MiniCssExtractPlugin({ //生产模式使用分离代码插件
            filename: process.env.NODE_ENV ? 'css/[name].[chunkhash].css' : 'css/[name].css'
        })
    ]

测试

运行 npm run build, 观察 dist 目录下的文件：

成功添加了 hash 数值