压缩HTML与js

webpack v5 开箱即带有最新版本的 terser-webpack-plugin ,只需要在webpack5中把mode设置为production,打包时就会自动压缩js和html代码。

注意html使用的是html-webpack-plugin插件生成的

压缩css

压缩css需要**css-minimizer-webpack-plugin插件,css-minimizer-webpack-plugin** 不仅会压缩css文件还会自动删除没有用到的css代码。

npm i -D css-minimizer-webpack-plugin
optimization: {
		minimizer: [new CssMinimizerPlugin()],
},
plugins: [
		new HtmlWebpackPlugin({
			title: "My Project",
		}),
		new CleanWebpackPlugin(),
		// new BundleAnalyzerPlugin(),
		new SpeedMeasurePlugin(),
		new CssMinimizerPlugin(),
		new MiniCssExtractPlugin({
			filename: "css/[name].css",
		}),
	],