webpack 日常记录

1、内容相同，每次打包生成的 hash 不一样

详细可以看：https://zhuanlan.zhihu.com/p/389408380
问题描述：
只是希望每次项目内容更改，打包生成的 hash 不一样，那么 按照常理来说，
在配置 mini-css-extract-plugin 插件的时候， filename 和 chunkFilename 这么配置按说没有问题。

new MiniCssExtractPlugin({ // 将css从js中提取出来
    filename: utils.assetsPath('css/[name].[contenthash:8].css'),
    chunkFilename: utils.assetsPath('css/pages/[name].[contenthash:8].css'),
    ignoreOrder: true // 忽略文件的加载顺序
})

但是实际打包的过程中发现经常出现 内容相同，hash不同，而且出现的几率不一定

本地环境下，即使是没有改变文件内容，但是 hash 值却在变化。

原因：
webpack 的 module chunk 默认是以 id 递增命名，那么在有文件增删的时候，id 就会发生变动，导致最终生成的文件内容不一样。

解决办法：
这里的解决方案就是不要使用id给文件命名，直接使用路径。配置 optimization 的 moduleIds , chunkIds 即可。

optimization: {
    // 解决在内容相同的情况下，每次打包生成的 hash 值不一样的问题
    moduleIds: 'named',
    chunkIds: 'named',
    ....
}