06-webpack5学习-css压缩_webpack5 压缩css-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39876270/article/details/125325378

本文介绍了如何配置Webpack来实现CSS压缩和自动添加浏览器前缀。通过`mini-css-extract-plugin`、`css-loader`、`postcss-loader`和`autoprefixer`等插件，可以将未加前缀的CSS转换为跨浏览器兼容的样式，并利用`optimize-css-assets-webpack-plugin`进一步优化CSS资产。在`package.json`中设置打包命令后，通过`npm run build`即可完成打包过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目结构

webpackCssCompress
│  package-lock.json
│  package.json
│  postcss.config.js
│  webpack.config.js
└─src
		index.css
        index.js
        index.css

安装依赖

在webpackCssCompress目录下运行

npm i webpack webpack-cli html-webpack-plugin css-loader mini-css-extract-plugin postcss-loader autoprefixer optimize-css-assets-webpack-plugin --save-dev

webpack配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exprots = {
	mode:'development',
	entry:'./src/index.js',
	output:{
		path:resolve(__dirname,'dist'),
		filename:'[name].build.js'
	},
	module:{
		rules:[
			{
				// 匹配文件规则
				test:/\.css$/i,
				// 使用的loader
				use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin(),
		new MiniCssExtractPlugin({filename:"[name].css"}),
		new OptimizeCssAssetsWebpackPlugin()
	]
}

postcss.config.js

module.exports = {
	plugins:[require('autoprefixer')]
}

index.css

编译前

body{
	/* 需要添加前缀的样式 */
	user-select:none;
}
/* 其他样式 */

编译后

body{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
/* 其他样式 */

打包命令

方式一：在webpackCssCompress目录下运行

webpack --config ./webapck.config.js

方式二：在package.json文件的scripts属性新增如下命令

{
	...
	"scripts":{
		"build":"webpack --config ./webpack.config.js"
	}
	...
}

修改保存后，在webpackCssCompress目录下运行如下命令：

npm run build

打包后的目录

webpackCssCompress
│  package-lock.json
│  package.json
│  postcss.config.js
│  webpack.config.js
├─dist
│      index.build.js
│      index.html
│      index.css
└─src
		index.css
        index.js