文件压缩分三种类型js，css，html。

1、JS文件的压缩：

webpack4以上已经内置了js的压缩插件uglifyjs-webpack-plugin，如要修改插件的配置还是要下载之后再修改，默认打包之后已压缩js代码。

terser-webpack-plugin

webpack5及以上已经内置了js的压缩插件terser-webpack-plugin，如要修改插件的配置还是要下载之后再修改，默认打包之后已压缩js代码。

TerserWebpackPlugin | webpack 中文文档

2、CSS文件的压缩

npm i optimize-css-assets-webpack-plugin -Dnpm i cssnano -D

//webpack.config.jsconst OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');module.exports = {plugins:[new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano')})]}

CssMinimizerWebpackPlugin

这个插件使用cssnano优化和压缩 CSS。就像optimize-css-assets-webpack-plugin一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。

CssMinimizerWebpackPlugin | webpack 中文文档

3、HTML压缩

使用html-webpcak-plugin

npm install --save-dev html-webpack-plugin //安装

const HtmlWebpackPlugin = require('html-webpack-plugin');const path = require('path');module.exports = {entry: 'index.js',output: {path: path.resolve(__dirname, './dist'),filename: 'index_bundle.js',},plugins: [// 如果有两个html需要加两个，此处后期会进行优化处理。new HtmlWebpackPlugin({template: path.join(__dirname, 'src/index.html'),filename:'index.html',chunks: ['index'],inject: true,minify:{html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false}}),new HtmlWebpackPlugin({template: path.join(__dirname, 'src/search.html'),filename:'search.html',chunks: ['search'],inject: true,minify:{html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false}})],};