Webpack 缓存

缓存

使用 webpack 来打包我们的模块化后的应用程序，webpack 会生成一个可部署的 /dist 目录，然后把打包后的内容放置在此目录中。只要把 /dist 目录中的内容部署到服务器上，客户端（通常是浏览器）就能够访问此服务器的网站及其资源。

获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为缓存的技术。

可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很棘手。

也就是说，对于不会经常更新的文件，我们要保证它们的文件名不变，这样就可以命中缓存，浏览器就会直接从本地取出，从而提高性能；对于需要经常更新的文件，我们又要保证它们的文件名，会随着文件内容的改变而改变，这样，浏览器就会从服务器请求更新后的文件。

输出文件的文件名

通过使用 output.filename 进行文件名替换，可以确保浏览器获取到修改后的文件。[hash] 替换可以用于在文件名中包含一个与构建相关(build-specific)的 hash，但是更好的方式是使用 [chunkhash] 替换，在文件名中包含一个 与 chunk 相关(chunk-specific)的哈希。

修改 webpack.config.js 文件：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    plugins: [
        new HTMLWebpackPlugin({
            title: '缓存'
        }),
        new CleanWebpackPlugin(['dist'])
    ],
    output: {
        filename: '[name].[chunkhash].js',   // 与 chunk 相关的哈希
        path: path.resolve(__dirname, 'dist')
    }
};

src/index.js 的内容为：

import _ from 'lodash';

function component() {
    var element = document.createElement(