二十六、通过给生产环境出口文件添加 contenthash 参数，充分利用浏览器缓存 ------ 2019-07-21

一、为什么要给生产环境的出口文件添加 contenthash 参数：
1、未添加contenthash参数的时候，我们打包的文件：

image.png

目前的项目结构比较简单，如上，
index.html是单页面的HTML文件，
main.js是项目的JS入口文件，
vendors~main.chunk.js是代码分割出来的第三方模块的JS文件；

2、当我们发布到网上，页面加载的情况如下：

image.png

现在假设我们更改了main.js中的代码，重新打包发布，用户只是简单的刷新了一下页面，并没有清空缓存，这个时候，浏览器缓存中有main.js和vendors~main.chunk.js的缓存，此时浏览器就会使用缓存，而不是加载最新的main.js文件；这个情况不是我们希望看到的；

3、如果我们每次打包的时候能根据项目中的文件是否发生变化生成带有不同hash值得文件就好了，就可以让发生变化的文件重新加载，没发生变化的文件充分利用浏览器的缓存;

二、如何根据文件内容是否变化打包出带有不同hash值的文件：

（1）将webpack配置文件中的output抽离出来，区分生产环境和开发环境：
将webpack.common.js中的output配置项剪切出来，不要了，在webpack.prod.js和webpack.dev.js中各复制一份，

webpack.prod.js中将filename和chunkFilename分别添加[contenthash]参数
 output: {
        filename: '[name].[contenthash].js', 
        chunkFilename: '[name].[contenthash].chunk.js',
        path: path.resolve(__dirname, '../bundle'),
    },

webapck.dev.js中不需要更改：
 output: {
        filename: '[name].js', 
        chunkFilename: '[name].chunk.js',
        path: path.resolve(__dirname, '../bundle'),
    },

[contenthash]参数的意义：根据此次打包时的文件内容与上次打包对比是否发生变化，如果变化contenthash也会变化，如果未变化contenthash也不变化；
此时打包生成的文件如下：

image.png

js文件中的随机字符串就是contenthash值；

三、对于老版的webpack，可能我们并没有改变任何文件内容，但是两次打包生成的文件的contenthash值竟然也不相同，这是怎么回事？

比如我们上面的打包，我们在项目的入口文件index.js中使用了lodash这个库，在我们打包的时候，业务代码和库代码之间会存在关联，我们把这种关联叫做mainfest，这也是用代码来描述的，mainfest相关的代码既存在于main.js中，也存在于vendors~main.chunk.js中，每次打包的时候，可能这种关联代码在旧版的webpack中存在差异，这就导致了每次打包的contenthash值都会变化，怎么解决这个问题？

1、最新的webpack4.X已经帮我们处理了这个问题，我们可以直接升级webpack到最新版本；
2、如果你不想升级webpack版本，可以在webpack.common.js中加一个runtimeChunk配置项：

  optimization: {
        runtimeChunk: {
            name: 'runtime'
        },
        usedExports: true,
        splitChunks: {}
    }
这样在我们打包的时候，就会把这种JS文件或者包与包之间的关系单独打包到一个runtime.[conenthash].js文件中

image.png