目录
webpack 打包模块化后的应用程序，会生成一个可部署的 /dist目录，只要 /dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存 的技术。
通过命中缓存，降低网络流量，使网站加载速度更快，然而，在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当需要获取新的代码时，就会显得很棘手。
通过必要的配置，以确保 webpack 打包生成的文件能够被客户端缓存，而在文件内容变化后，能够请求到新的文件。
输出文件名(Output Filenames)
通过使用 output.filename 进行文件名替换，来定义输出文件的名称，可以确保浏览器获取到修改后的文件。webpack 提供了一种可替换模板字符串的方式，通过带括号字符串来模板化文件名。[contenthash]将根据资产的内容创建唯一的哈希。当资产的内容发生变化时，[contenthash]也会发生变化。
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
},
plugins: [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false
}),
new HtmlWebpackPlugin({
title: 'Caching'
}),
],
output: {
filename: '[name].[chunkhash].js', // dist 目录下生成 index.8e7356e76ac80f537595.js 文件
path: path.resolve(__dirname, 'dist')
}
};
缓存第三方库
SplitChunksPlugin可用于将模块拆分为单独的包。webpack 提供了一种优化功能，optimization.runtimeChunk。
将第三方库如 lodash提取到单独的 vendor chunk 文件中，因为它们很少频繁修改。利用 client 的长效缓存命中来消减请求， 添加optimization.splitChunks.cacheGroups 参数并构建：
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors', // dist 目录生成 vendors.c9b22484d40ed904be57.js
chunks: 'all',
}
}
}
}
};
将 js 文件放到一个文件夹中
全部 js 文件都在 dist 根目录下，将js统一放到一个文件夹中：
module.exports = {
output: {
filename: 'js/[name].[contenthash].js', // 在前面加上路径即可
},
};