公司让我从0搭建一个webpack环境,我想着用一个webpack4,但是遇到一个hash问题,想请教大家
问题描述 : webpack@4用mini-css-extract-plugin单独分离了css
然后修改css代码后,引用css的那个js文件的hash也跟着发生了变化。
但是我css设置了contenthash, js也设置了chunkhash
new MiniCssExtractPlugin({
filename: 'static/css/[name].[contenthash:8].css'
})
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'static/js/[name].[chunkhash:8].js',
publicPath: '/'
},
虽然不清楚,我觉得这个跟manifest可能没有关系,但是以防万一也单独分离了runtime的代码
optimization: {
splitChunks: {
chunks: 'all'
},
runtimeChunk: true
},
然后我修改css文件里的一个样式,css/js 文件的hash都变化。。可是我期望的是只有css变化,
另外也拿@vue/cli测试了一下,因为我想着它也是基于webpack4的嘛
这个是一个新创建的官方项目,然后我直接打包
然后修改了.vue文件里的一行css代码,然后再次打包
2次结果如图
依旧是css和js的 hash值都发生了变化。这个正常吗?我觉得希望的效果是只有css文件变化才对呀。
补充: webpack@3.10.0的版本有测试过,是没问题的。单独分离出来的css的改动,不会造成js的chunkhash变化
不知道大家是否有遇到过这个问题,如果没遇到就当给大家提个醒,遇到过的话,帮帮我。。
补充一个我遇到问题的webpack4的demo,只是简单的配置了css分离,clone后,运行npm run build就行 https://github.com/ziwei3749/webpack-4-demo
看了下官方文档cache,个人认为出问题的点可能是:
- 设置runtimeChunk: ‘single’
- plugins中配置NamedModulesPlugin(开发)或HashedModuleIdsPlugin(生产)
@lucky-leaf 十分感谢,我回去就看一下cache
先尝试了一下,貌似没有作用,我在看看文档吧。感谢
补充了个配置demo,clone下来就可以看到问题
output也用content hash就行了。
filename: "[name].[contenthash].js"
@noe132 真的十分感谢啊!
这样的话,也可以想得通,因为分离后的js和css还是同一个chunkId,chunk里的css变化,导致chunkhash变化,所以js文件名称就收到了影响吧。。
但明明webpack3只需要css部分设置为content hash 就可以的 看来我得看看webpack4里关于chunkhash/content hash的定义了。。我都不知道webpack自带content hash
@noe132 这个问题困扰了我一天,到处搜索、问人… 真的很有经验呀,老哥
@noe132 好像contenthash这个是webpack4新出的,测试了一下webpack3里都识别不了content hash,
然后我去查英文文档,搜索content hash也都是说的
extract-text-webpack-plugin 和 mini-css-plugin的配置,您是从哪里查到的呢?很好奇,我是不是搜索的有点问题。。
其实我也就是瞎试了一下。我搜了一下,这个contenthash的文档并没有写完,但是已经有这么个东西了。
@noe132 哈哈,佩服 那你是搜到的结果表示,说可以用conenthash来替换原来的chunkhash,但还没有写到文档上吗? 这个瞎试了一下。。又让我多了一点不安呀,哈哈
我发现webpack的确坑多,我看github上的issues有人提问contenthash在4.3版本不工作之类的。
看来真的webpack版本配置好了不能乱动。。完全不感动