整理代码
删除上篇的使用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跨模块构建工具】