webpack打包学习笔记05-缓存

缓存

我们的网页一般都会被浏览器缓存，这是因为加载大量的图片啊，css，js之类的，如果没有缓存，每次都要下载这么多东西，所以浏览器会采用缓存减少资源的请求。

然而我们有时候并不需要这种减少资源请求，因为不断的更新代码，我们需要最新的代码，这个时候需要用到缓存的技术（补充说明：一般我们会通过改变html中对不同js的引用来使浏览器加载不同的资源，下面详细说明）

输出文件的文件名

 output: {
    // filename: 'bundle.js',
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
 }

里面的contenthash会根据内容生成唯一的一个值，即唯一的js文件

提取引导模板

webpack.pro.js

const merge = require('webpack-merge');
const common = require('./index.js');

module.exports = merge(common, {
  mode: 'production',
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
    cacheGroups: {
        vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
        }
    }
    }
  }
})

其中runtime是运行时，加载的所有的通过import引入的js，vendors是第三方库

模块标识符

在我们打包的时候，修改其中一个文件的时候，我们希望其它文件的hash值不变，即保持文件名不变，这个时候我们需要使用插件HashedModuleIdsPlugin（）

const merge = require('webpack-merge');
const common = require('./index.js');
const webpack = require('webpack');
const path = require('path')

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new webpack.HashedModuleIdsPlugin()
  ],
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, '../dist')
  }
})

如果你报了以下的错误：

你需要留意你使用contenthash的同时，使用了 HotModuleReplacementPlugin这个插件，应该把这个插件放在webpack.dev.js中

 修改你的print.js然后更新文档内容，你会发现vendor文件的contenthash的名称是不会产生变化的