webpack遇到的问题

问题一：js中的css文件提取

原有使用方法

webpack版本是4, 提取插件是"extract-text-webpack-plugin"，效果如下图:

只修改css文件，编译效果如下图：

修改css所在的js代码，编译效果如下图：

存在的问题

如果只更改 css文件，那么编译出来的结果hash保持不变，依赖于所在文件js内容的改变，只要内容更改，css生成文件的hash也就改变，造成的结果是只改css没办法更新用户缓存，改了js影响了css的hash, 用户也更新缓存，但是内容却没有改变，不能很好利用缓存。

现有解决方法

webpack版本是4， 提取插件是"mini-css-extract-plugin"和"optimize-css-assets-webpack-plugin"，前者用于css文件提取，后者用于css文件提取优化,比如压缩颜色、删除注释等，实验如下：

js和css文件都不改

只改css文件

只改js

比较

从以上结果可以看出生成的css文件和js文件hash值不受对方影响。

两者区别

"extract-text-webpack-plugin"使用chunkhash, "mini-css-extract-plugin"使用contenthash, 后者对webpack版本有要求。

持续更新中。。。