替換詞 [hash] 與 [contenthash] 的差異

 

使用 [contenthash] 替換詞的 webpack.config.js 內容如下

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js'
  },

  output: {
    filename: 'app.[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

 

使用 [hash] 替換詞的 webpack.config.js 內容如下

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js'
  },

  output: {
    filename: 'app.[hash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

 

兩者用途也都是替檔案添加 hash code,其差異為,

[contenthash] 替換詞是只要檔案內容有修改過,則在轉譯時檔名 hash code 就會跟著變動;

[hash] 替換詞則是不論檔案內容是否有修改過,在轉譯時檔名 hash code 不會跟著變動。

 

參考資料:

Caching

HtmlWebpackPlugin

How to use webpack HASH filename and dotnet publish?

A Practical Approach to Cache Busting with Webpack and ASP.NET Core 1.0