## 模塊標識符 (Module Identifiers)
首先向項目中再添加一個模塊 `print.js`：
**src/print.js**
```
export default function print(text) {
console.log(text);
};
```
**src/main.js**
```
import _ from 'lodash';
import print from './print';
print('hello webpack!')
```
再次運行構建，然后我們期望的是，只有 `main` bundle 的 hash 發生變化，然而……
:-: 
……我們可以看到這三個文件的 hash 都變化了。這是因為每個 [`module.id`](https://doc.webpack-china.org/api/module-variables#module-id-commonjs-) 會基于默認的解析順序(resolve order)進行增量。也就是說，當解析順序發生變化，ID 也會隨之改變。因此，簡要概括：
- `main` bundle 會隨著自身的新增內容的修改，而發生變化。
- `vendor` bundle 會隨著自身的 `module.id` 的修改，而發生變化。
- `manifest` bundle 會因為當前包含一個新模塊的引用，而發生變化。
第一個和最后一個都是符合預期的行為 -- 而 `vendor` 的 hash 發生變化是我們要修復的。幸運的是，可以使用兩個插件來解決這個問題。第一個插件是 [`NamedModulesPlugin`](https://doc.webpack-china.org/plugins/named-modules-plugin)，將使用模塊的路徑，而不是數字標識符。雖然此插件有助于在開發過程中輸出結果的可讀性，然而執行時間會長一些。第二個選擇是使用 [`HashedModuleIdsPlugin`](https://doc.webpack-china.org/plugins/hashed-module-ids-plugin)，推薦用于生產環境構建：
**webpack.config.js**
```
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js',
vendor: [
'lodash'
]
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].[chunkhash].js'
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '..'),
exclude: [],
verbose: true,
dry: false
}),
new HtmlWebpackPlugin({
title: 'Output Management',
filename: 'index.html',
template: 'index.html'
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'static/test.html', //
template: 'src/static/test.html'
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
})
]
};
```
現在，不管再添加任何新的本地依賴，對于每次構建，`vendor` hash 都應該保持一致。
參考資料: https://doc.webpack-china.org/guides/caching
