文件打包

# 文件打包
## 文件指紋
> Hash: 和整個項目的構建相關，只要項目文件有修改，整個項目構建的hash值就會更改
>
> Chunkhash：和webpack打包的chunk有關，不一樣的entry會生成不一樣的chunhash值
>
> Contenthash：根據文件內容來定義hash，文件內容不變，則contenthash不變
### js文件指紋
設置output的filename，使用[chunkhash]
```javascript
output: {
filename: "[name][chunkhash:8].js",
path: path.resolve(__dirname, "/dist")
}
```
> [name]: 文件名
> [chunkhash:8]: 使用chunkhash而且只取前8位
### css文件指紋
設置MiniCssExtractPlugin的filename，使用[contenthash]
```javascript
plugin:[
new MiniCssExtranctPlugin({
filename: [name][contenthash:8].css
})
]
```
### 圖片文件指紋
設置file-loader的name，使用[hash]
```javascript
module:{
rules:[{
test: /.(png
use: [{
loader: "file-loader",
options:{
name: "img/[name]/[hash:8].[ext]"
}
}]
}]
}
```
## 代碼壓縮
### js壓縮
webpack4後已經內置了uglifyjs-webpack-plugin插件進行代碼壓縮，咱們也能夠安裝這個插件，並在壓縮的時候添加一些參數
### css壓縮（這個有點問題）
使用optimize-css-assets-webpack-plugin
同時使用cssnano
```javascript
plugins:[
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /.css$/g,
cssProcessor: require('cssnano')
})
]
```
### html文件的壓縮（並無壓縮）
修改html-webpack-plugin，設置壓縮參數，一個html文件須要加上一段下面的代碼
```javascript
plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname, "src/search.html"),
filename: "search.html",
chunks: ["search"],
inject: true, // 注入js
minify: {
html5: true,
conllapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
})
]
```
### webpack打包文件清理
使用clean-webpack-plugin插件進行清理打包出來的文件
```javascript
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
new CleanWebpackPlugin()
```