webpack学习（十七）：缓存

红太狼 2022-04-05 12:20 272阅读 0赞

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]  
继上一次使用 process.env.NODE\_ENV 区别生产模式和开发模式: [https://blog.csdn.net/qq593249106/article/details/84970525][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 目录下的文件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
成功添加了 hash 数值

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84970525]: https://blog.csdn.net/qq593249106/article/details/84970525
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220405/45114d0960594469a782ab11dbc06fbc.png