webpack之缓存

webpack的缓存通过文件名来。通过使用output.filename进行文件名替换，如果文件名被替换，浏览器会认为它被更新，则缓存失效，向服务器请求资源；否则继续使用缓存，无需再次请求资源。通过缓存降低网络流量，使网站加载速度加快。
只需在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 CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
-       title: 'Output Management'
+       title: 'Caching'
      })
    ],
    output: {
-     filename: 'bundle.js',
+     filename: '[name].[chunkhash].js',
      path: path.resolve(__dirname, 'dist')
    }
  };

以上代码用了[chunkhash]替换，使相对好的方式，另一种方式[hash]相对较差。
npm run build后会在Asset栏目看到所有的js文件都加上了hash，如果对js文件不加修改，再次npm run build，Asset栏目产生的hash仍不变。修改js文件后，hash值才会有所变化。此时，浏览器会再次请求资源。
未改变hash.jpg