# 为什么要使用hash?
一句话来说就是可以配合浏览器缓存带给更佳的用户体验，根据文件来生成对应的hash值以此来告诉浏览器要不要读区缓存。
# 前期准备
mkdir webpack-hash && cd webpack-hash
npm init
cnpm i webpack webpack-cli webpack-merge clean-webpack-plugin style-loader css-loader mini-css-extract-plugin --save-dev
touch webpack.common.js
mkdir src && cd src
mkdir js && cd js
touch index.js
touch vendors.js
cd ../
mkdir style && cd style
touch style.css
@前端进阶之旅: 代码已经复制到剪贴板
现在整个项目目录变为：
给每个文件里加点东西：
*/src/js/index.js*:
console.log('我是index.js')
@前端进阶之旅: 代码已经复制到剪贴板
/src/js/vendors.js:
console.log('我是vendors.js')
@前端进阶之旅: 代码已经复制到剪贴板
/src/style/style.css:
.container {
background-color: red;
}
@前端进阶之旅: 代码已经复制到剪贴板
同时配置一个公共的
webpack配置，也就是配置一下webpack.common.js文件，以便我们后面用webpack-merge来管理不同的webpack配置
webpack.common.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlu
