WebPack 是一个现代化的前端构建工具，它可以将多个 JavaScript 文件打包成一个或多个文件，从而减少网络请求次数，提高页面加载速度。但是，在使用 WebPack 进行开发时，我们经常会遇到一个问题——缓存。当我们修改了某个文件后，WebPack 怎样才能避免重新打包所有文件，而只打包修改的文件呢？本文将介绍 WebPack 中如何优化缓存，以及如何使缓存更加高效。
什么是 WebPack 的缓存？
WebPack 的缓存是指在第一次构建项目时，WebPack 会将所有的模块打包成一个或多个文件，并将这些文件缓存起来。当下一次构建项目时，WebPack 会检查每个文件的修改时间，如果文件没有修改，WebPack 就会直接使用缓存的文件，而不重新打包。这样就可以大大提高构建速度，减少网络请求次数。
如何优化 WebPack 的缓存？
1. 使用 hash 值
在 WebPack 中，每次打包时，都会生成一个唯一的 hash 值。我们可以将这个 hash 值添加到文件名中，从而避免浏览器缓存文件。当我们修改了某个文件后，WebPack 会重新生成一个新的 hash 值，并将该值添加到文件名中，从而避免浏览器使用旧的缓存文件。
output: {
filename: '[name].[hash].js'
}2. 使用 contenthash 值
在 WebPack 中，每个模块都有一个唯一的 contenthash 值。我们可以将这个值添加到文件名中，从而避免浏览器缓存文件。当我们修改了某个模块时，WebPack 会重新生成一个新的 contenthash 值，并将该值添加到文件名中，从而避免浏览器使用旧的缓存文件。
output: {
filename: '[name].[contenthash].js'
}3. 使用 NamedModulesPlugin 插件
在 WebPack 中，每个模块都有一个唯一的 id。当我们修改了某个模块时，WebPack 会重新生成一个新的 id。这样会导致所有模块的 id 都被修改，从而使缓存失效。为了避免这种情况，我们可以使用 NamedModulesPlugin 插件，将模块的路径作为模块的 id，从而避免模块 id 的变化。
plugins: [
new webpack.NamedModulesPlugin()
]4. 使用 cache-loader 插件
cache-loader 插件可以将 WebPack 的缓存保存在内存中，从而避免将缓存写入磁盘。这样可以大大提高缓存的读取速度，减少构建时间。
// javascriptcn.com 代码示例
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'cache-loader'
},
{
loader: 'babel-loader'
}
]
}
]
}总结
WebPack 的缓存是提高构建速度和减少网络请求次数的重要手段。通过使用 hash 值、contenthash 值、NamedModulesPlugin 插件和 cache-loader 插件，我们可以优化 WebPack 的缓存，使其更加高效。在实际开发中，我们应该根据项目的具体情况，选择合适的优化方案，从而提高项目的开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65768996d2f5e1655dfd496e