webpack學習之路（六）hash/chunkHash/contentHash

時間 2019-11-07

標籤 webpack 學習之路 hash chunkhash contenthash 简体版

原文原文鏈接

webpack的指紋策略是實現前端增量更新的方案之一。經過給文件加上hash後綴，從而最大程度上使用緩存css

webpack提供三種hash生成方式：前端

hash：和整個項目構建相關，只要一個文件有修改，整個項目的hash值就會改變
chunkHash：模塊的hash，根據模塊的修改才改變對應的hash值
contentHash：文章內容修改纔會改變的hash值

根據描述，咱們已經能夠大概區分用法，chunkHash能夠用於js打包，contentHash能夠用到css文件打包。咱們實踐一下。webpack

1.Hash

目錄web

.
├── dist
├── package-lock.json
├── package.json
├── src
│   ├── page0.js
│   └── page1.js
└── webpack.config.js
複製代碼

webpack.config.jsjson

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[hash:8].js'
},
複製代碼

輸出緩存

能夠看到打包出來以後是兩個文件的hash值同樣，而後我編輯一下 page0.js，再輸出一次

能夠發現，兩個文件的hash值都改變。這在實際開發中確定是不知足咱們的需求的，那麼chunkHash這個時候就可上場了。sass

2.chunkHash

webpack.config.jsbash

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js'
},
複製代碼

打包以後能夠發現，兩個文件的hash值是不一樣的，如今咱們再來修改一下 page0.js

只有 page0.jshash發生了變化， page1並無變化，那麼意味着 page1.js可使用緩存。

可是在這又延伸出來一個問題，若是個人文件內有css內容呢？可不能夠剝離？當js修改的時候，不影響css版本呢？固然是能夠的，這就使用到contentHashwebpack-dev-server

3.contentHash

咱們在page0.js引入一個.scss文件post

import './style.scss'
複製代碼

咱們要作的的是剝離css文件，並添加contentHash，這裏須要藉助一個插件mini-css-extract-plugin,安裝以後引入一下：

module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
    }),
  ],
};
複製代碼

打包看下