【webpack】快速笔记20 -- Webpack遇上浏览器缓存cache

整理代码

删除上篇的使用css代码分割的样式，src > style.css，然后安装一下npm installl jquery --save

开始

修改src > index.js：

import _ from 'lodash'
import $ from 'jquery'

const dom = $('<div>');
dom.html(_.join(['webpack','cache'],','));
$('body').append(dom);

此时我们重新打包npm run build，出现了‘文件过大’的警告（就是因为我们在index.js中引入了两个第三方插件库的原因）：

解决警告webpack.common.js：

performance: false,   // + 新增
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin()
    ],

就是告诉webpack，占时不要去检测性能问题performance: false，添加完配置之后重新运行打包即可，还有一点为了不影响下面的讲解，我们需要webpack在生产模式下，不要进行sourchMap的映射打包，所以在webpack.prod.js中注释掉devtools的配置，再次运行打包即可；

cache

此时我们打开打包文件中的index.html，页面正常显示，图下：

好了，在不考虑代理服务器的验证并且去掉了浏览器中的Disable cache后，下次请求（缓存规定的时间）就会浏览器就会自动拿缓存

好了，明确浏览器下次拿缓存cache的话，我们修改一下index.js：

问题：

此时我们重新打包，再次刷新浏览器（不是强制刷新哦），此时我们看到页面没有变化，难道是我们修改的index.js错了？

分析：

不是的~其实是浏览器依然拿之前的缓存去渲染页面，即使你修改了代码他也不知道如何区分前后两次改变是否一样，在浏览器认为，既然你给我的加载文件名不变，那浏览器就同样去缓存里拿，好了 → 说来说去就是要让webpack打包可以让浏览器知道代码变化的文件即可，那我们这样解决 ↓

我们在出口文件outpput中进行修改，首先我们去掉webpack.common.js中的出口配置output，因为我们要写两个环境不同的出口配置，所以不再是共同的出口了

webpack.common.js：

output: {
    // publicPath: 'http://cdn.com.cn',
    // filename: '[name].js',          //  - 注释
    // chunkFilename: '[name].chunk.js',  //  - 注释
    path: path.resolve(__dirname, '../bundle') 
}

webpack.dev.js:

// + 新增
output:{
    filename: '[name].js',
    chunkFilename: '[name].chunk.js'
}

webpack.prod.js:

// + 新增
output:{
     filename: '[name].[contenthash].js',
     chunkFilename: '[name].[contenthash].chunk.js'
 }

此时重新打包，发现打包文件带有一段hash值，这个值就是来验证打包内容前后是否一致的唯一便签，只要内容有变动hash值就会发生变化，这样一下，我们再去验证一下，发现只要改变了代码浏览器就重新请求，而没有改变的话浏览器也就直接去拿缓存数据内容

结语

#下一篇【shimming跨模块构建工具】