为什么webpack4里分离出css后,修改css代码后,css文件和js文件的hash都变化?
发布于 1 个月前 作者 ziwei3749 721 次浏览 来自 问答

公司让我从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的嘛

屏幕快照 2018-07-27 16.49.39.png

这个是一个新创建的官方项目,然后我直接打包

然后修改了.vue文件里的一行css代码,然后再次打包

2次结果如图

依旧是css和js的 hash值都发生了变化。这个正常吗?我觉得希望的效果是只有css文件变化才对呀。

补充: [email protected]的版本有测试过,是没问题的。单独分离出来的css的改动,不会造成js的chunkhash变化

不知道大家是否有遇到过这个问题,如果没遇到就当给大家提个醒,遇到过的话,帮帮我。。

补充一个我遇到问题的webpack4的demo,只是简单的配置了css分离,clone后,运行npm run build就行 https://github.com/ziwei3749/webpack-4-demo

11 回复

看了下官方文档cache,个人认为出问题的点可能是:

  1. 设置runtimeChunk: ‘single’
  2. 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版本配置好了不能乱动。。完全不感动

回到顶部