npm webpack打包缓存 导致css引用地址未更新
问题如下:
测试环境配置:
publicPath: '/chat/',
生产环境配置:
publicPath: '/',
css中引用背景图片
background-image: url('@/assets/images/calendar/arrow-left.png');
先打包测试环境,观察打包后的css文件引用的背景图片地址
可以全局搜索
/dist/assets
字符串判断
再打包生产环境,观察打包后的css文件引用的背景图片地址
发现背景图片的地址并没有变为/dist/assets/**
依然是/chat/dist/assets/**
,最终生产包发布后出现背景图片异常的问题。
解决办法
此问题是因为打包缓存导致,在webpack
配置中关闭缓存即可,虽然打包慢一点,但是确保包是没有问题的。
修改webpack.prod.config.js
注意区分开发环境和打包环境的配置文件,开发环境关闭缓存后热更新非常慢!!!
module.exports = {cache: false,// ...config
};
再次打包,即可正常。