webpack輸出文件名設置chunkhash時在開發環境報錯問題的解決

webpack輸出文件名設置chunkhash時在開發環境報錯問題的解決

在webpack配置中，使用chunkhash代替hash可實現輸出文件名中哈希值與模塊內容掛鉤，避免每次構建時輸出文件名中哈希值都變更（即使文件文件內容沒有發生任何變化）。在開發環境下，當輸出文件名filename設置chunkhash時會出現如下報錯：

原因：

報錯中提示了我們使用hash就可以解決該問題，這是爲什麼呢？原因就是chunkhash不可以與開發環境下的熱更新一起使用。

解決方法：

解決方法有兩種，一種是保留熱更新功能，根據環境變量來決定filename使用chunkhash還是hash；第二種是去掉熱更新功能即可。

方法一：保留熱更新

在開發環境下我們需要使用熱更新來實現修改內容的實時刷新，熱更新功能方便實用，但生產環境是不需要熱更新的，因此通過根據npm腳本中的環境變量來區分開發與生產環境，以此來決定filename使用chunkhash還是hash。

// package.json
"scripts": {
    ...
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --hide-modules",
    ...
},

// webpack.config.js
module.exports = {
	output: {
    	path: path.resolve(__dirname, './dist'),
    	publicPath: '',
    	filename: process.env.NODE_ENV !== 'development' ? '[name].[chunkhash:6].js' : '[name].[hash:6].js',
    	chunkFilename: '[name].[chunkhash:6].js',
  	},
}

方法二：去掉熱更新

// package.json
"scripts": {
    ...
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open",
    "build": "cross-env NODE_ENV=production webpack --hide-modules",
    ...
},

// webpack.config.js
module.exports = {
	output: {
    	path: path.resolve(__dirname, './dist'),
    	publicPath: '',
    	filename: '[name].[chunkhash:6].js',
    	chunkFilename: '[name].[chunkhash:6].js',
  	},
}

參考文獻：

[1] webpack指令npm start出現錯誤Cannot use [chunkhash] for chunk