【前言】

webpack5的压缩大致和webpack4相似，稍微有一些不同

【不压缩css】

dev模式下不需要压缩css，且讲css以style的形式注入到html即可

  rules: [{test: /\.css$/,include: [/node_modules[\\/]antd/,/node_modules[\\/]normalize\.css/,/iconfont\.css$/,],use: [{loader: require.resolve('style-loader'),},{loader: require.resolve('css-loader'),options: {modules: false,},},],}]

以上代码将常见的css库，比如antd的css，normalize.css，iconfont.css包括进去

【压缩css】

webpack5中，

生产环境下，建议把css文件单独抽出来，否则html文件会比较大，也不能缓存，

将css文件抽出，而不是使用style-loader注入html，需要用到mini-css-extract-plugin这个插件，

详见：MiniCssExtractPlugin | webpack

  rules: [{test: /\.css$/,include: [/node_modules[\\/]antd/,/node_modules[\\/]normalize\.css/,/iconfont\.css$/,],use: [MiniCssExtractPlugin.loader,{loader: require.resolve('css-loader'),options: {modules: false,},},],}]

抽取出css文件后，默认是不压缩css，需要在optimization中配置一下

这里使用到了另一个插件，详见：CssMinimizerWebpackPlugin | webpack

  optimization: {minimizer: [new CssMinimizerPlugin(),],}

【不压缩scss】

同上，在开发环境中不需要压缩scss文件，只要style的性质注入html即可

  rules: [{test: /\.scss$/,use: ['style-loader','css-loader','sass-loader',],}],

【压缩scss】

同上，在生产环境也需要先抽离css文件，然后进行压缩

  rules: [{test: /\.scss$/,use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader',],}],optimization: {minimizer: [new CssMinimizerPlugin(),],}

【压缩js】

webpack5中，在生产环境下会默认开启js压缩，使用TerserWebpackPlugin | webpack

如果希望自己定制规则也可以通过传入options实现，详细可以看上述文档

  optimization: {minimizer: [new TerserPlugin({parallel: true,extractComments: false,terserOptions: {format: {comments: false,},},}),],}

例如上述配置，压缩时去掉了注释，开启了多进程处理

【总结】

1.抽取并压缩scss和css文件

2.压缩js文件

webpack随笔04-webpack5压缩jscss相关推荐

webpack项目css插件压缩等步骤
webpack项目css插件压缩等步骤 minicssextractplugin css插件防止闪屏首先安装npm i mini-css-extract-plugin -S 要求webpack5 这 ...
配置nginx直接使用webpack生成的gz压缩文件
配置nginx直接使用webpack生成的gz压缩文件前言:vue cli3的性能优化里面,开启gzip能得到很多的收益.通过webpack插件compression-webpack-plugin可 ...
webpack中对CSS压缩
1.在终端下载相关CSS压缩插件 PS D:\Webpack\03-webpackcss> npm i -D css-minimizer-webpack-plugin //webpack5以上官 ...
webpack+nginx开启gzip压缩部署项目
首先在服务器安装nginx sudo apt update sudo apt install nginx 安装完毕后将前端项目打包 webpack.output.publicPath里配置资源基础路径 ...
webpack对css进行压缩
在html中我们引用css代码一般是用link标签,如今我们借助webpack将css代码引入到我们的.js文件中,并让其生效. 接下来进入正题,我们将使用webpack中的css-loader和st ...
linux 压缩文件夹rar,让Ubuntu 16.04可以压缩/解压缩RAR文件
在Ubuntu 16.04下经常要用到压缩/解压缩RAR文件, 每次都是网上搜索教程,而且都没有详细解析每个命令的具体用法,现在详细记下方法,以备再次用的时候方便的找到. 因为参数 e 和 x 经常 ...
webpack（一）压缩js,加载css,压缩html,压缩图片
1.webpack是前端资源构建工具(将一系列小工具用一个大工具处理),静态模块打包器(js资源,css资源,图片字体等资源). 首先告诉webpack一个入口文件,webpack就会以这个入口文 ...
webpack抽离和压缩css文件
1.为什么要抽离和压缩css文件在生产环境,css代码必须抽离和压缩,不然打包会把css文件打包到js文件中,体积会比较大.(执行这个js再把css解析出来,塞到html中,这样性能并不好) 2.抽 ...
04.打包压缩解压缩
压缩单个文件 gzip filename 解压 gunzip filename 或者 gzip -d filename 文件打包把file1和file2打包成filename tar -cvf fi ...

webpack随笔04-webpack5压缩jscss