webpack学习笔记（八）缓存及打包文件

打包部署

使用webpack可以生成一个可以部署的dist目录，然后把打包好的内容防止到这个目录里，最后将这个目录部署上服务器server上，client浏览器就可以访问服务器上的网站和资源了。

缓存

最后一步获取资源比较耗时，因此浏览器会使用一个缓存的技术，我们可以通过命中缓存，以降低网络流量，使网站加载速度更快。然而我们再部署新版本的时候不更改资源的文件名，浏览器可能会认为你没有更新，那么浏览器可能会使用他的缓存版本。
由于缓存的存在，在获取新的代码的时候比较困难，那就需要配置webpack，来确保webpack编译生成的文件能够被客户端缓存，而在文件内容发生变化时，又能够请求到新的文件

output: {
        //filename:'[name].bundle.js',		//每次输出的文件名都一样，浏览器无法知道其更改了，会使用自己本地的缓存
        filename:'[name].[contenthash].js',		//根据内容设定文件名，只要更改内容就可以改变打包后输出的文件名。（与浏览器缓存相结合etag？）
        path: path.resolve(__dirname, './dist'),
        clean: true,
        assetModuleFilename: 'images/[contenthash][ext]'
    },

缓存第三方库

将第三方库提取到单独的vendor chunk文件中，因为第三方库很少像本地的源代码那样频繁修改。这样子可以利用client浏览器的长效缓存机制，命中缓存来消除请求，并减少像server获取资源，同时还能保证client和server代码版本一致。
例如：将lodash单独打包缓存在浏览器，第三方的代码始终可以使用浏览器缓存的内容
【但如果output里定义了filename与contenthash有关，会以output为准，还是有hash值】
在optimization里优化以下

splitChunks:{
            //chunks:'all'
            cacheGroups:{
                vendor:{
                    test: /[\\/]node_modules[\\/]/,
                    name:'vendors',
                    chunks:'all'
                }
            }
        }

总结：
1.缓存业务代码
通过修改输出文件的文件名，解决因文件名不变，浏览器不请求新的资源，而是在本地取资源。
使用可替换模板字符串的方法，定义contenthash，他能实现只要文件的内容不变哈希的字符串就不变
2.缓存第三方库代码
通过修改optimization.splitChunks这个属性来实现，可以定义一个cacheGroups缓存组，将我们的业务代码引用的第三方的文件都打包到一个文件中，在浏览器中缓存，由于这个文件不频繁更新，所以我们可以提高首屏的打开速度节省我们网络流量
3.将所有的打包文件都打包到script文件夹中
所以输出文件中有：
样式style【MiniCssExtractPlugin插件，在new的时候定义filename:‘styles/[contenthash].css’,并替换style-loader】
图片images【根据资源模块对图片进行打包，assetModuleFilename:‘images/[contenthash][ext]’】
代码js【在output中设置，filename:‘scripts/[name].[contenthash].js’】