在Webpack中如何仅为部分文件生成content hash？

你可以通过output.filename的函数式写法，结合入口名称或者chunk名称做判断，精准控制只给指定文件加hash，无需全局开启content hash配置。

方案1：指定入口文件单独加hash #

如果需要加hash的是某个固定入口文件，可按如下配置实现：

module.exports = {
  entry: {
    main: './src/index.js', // 不需要加hash的普通入口
    special: './src/special.js' // 需要加content hash的指定入口
  },
  output: {
    filename: (pathData) => {
      // 匹配到指定入口名称时添加contenthash
      if (pathData.chunk.name === 'special') {
        return '[name].[contenthash].js'
      }
      // 其余入口直接使用原名称输出
      return '[name].js'
    },
    path: __dirname + '/dist'
  }
}

方案2：指定异步chunk单独加hash #

如果需要加hash的是异步拆分出来的chunk，可以配合魔法注释的chunk名称做判断：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    chunkFilename: (pathData) => {
      // 匹配到指定chunk名时加hash
      if (pathData.chunk.name === 'async-special') {
        return '[name].[contenthash].js'
      }
      return '[name].js'
    }
  }
}

对应的异步引入写法：

// 魔法注释指定chunk名称，和上面配置的判断条件对应
import(/* webpackChunkName: "async-special" */ './src/special-async.js').then(module => {
  // 业务逻辑
})

注意事项 #

• 不要直接在output全局配置带hash的文件名，函数式写法可以更灵活做分支判断
• 如果项目有JS之外的资源需要单独加hash，也可以用同样的思路在对应loader的generator配置里做条件判断

内容的提问来源于stack exchange，提问作者Mary