webpack将所有的css抽取成一个文件以及css浏览器兼容

单独将所有css抽取成一个文件

• 通过使用mini-css-extract-plugin插件将项目中的所有css文件都整合到同一个css文件中然后html通过link标签引入

首先通过命令npm install -D mini-css-extract-plugin安装mini-extract-plugin插件

然后在需要使用该插件的配置文件中例如webpack.prod.js引入该插件

然后注册该插件

最后将所有的style-loader替换成MiniCssExtractPlugin.loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
	plugins: [
		new MiniCssExtractPlugin({
		//	指定输出文件
			filename: 'static/css/main.css'
		})
	]
}

最后运行npm run build命令即可在打包输出文件夹中找到该css文件了

处理css样式与浏览器不兼容

• 通过使用postcss-loader可以解决这个问题，但是postcss-loader依赖于postcss,然后postcss又使用到了postcss-preset-env,所以得同时安装三个包

通过命令npm install -D poscss-loader postcss postcss-preset-env安装需要使用到的包

然后在webpack的配置文件中将module.exports中的rules中使用到了css-loader的rule添加postcss-loader

module.exports = {
	module: {
		rules: [
			{
				test: /\.css$/, // 正则表达式，用于匹配需要加载的文件
             use: [ 
                 MiniCssExtractPlugin.loader,
                 "css-loader",
                 {
                     loader: 'postcss-loader',
                     options: {
                       postcssOptions: {
                         plugins: [
                             'postcss-preset-env'
                         ]
                       }
                     }
                   },
             ] // 使用的加载器插件模块，从右向左调用插件
			}
		]
	}
}

最后在package.json文件中添加browerslist配置项

• last 2 version： 即只对浏览器最新的两个版本做css兼容
• > 1% : 即对99%的浏览器做兼容
• not dead: 即对还在使用的浏览器做兼容

{
	"browerslist": [
		"last 2 version",
		"> 1%",
		"not dead"
	]
}

最后运行npm run build命令即可自动打包生成兼容指定浏览器的css文件