文件打包

# 文件打包

## 文件指纹

> 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()

```