webpack学习Day3-css兼容性处理

最新推荐文章于 2024-03-28 18:29:24 发布

Sandra

最新推荐文章于 2024-03-28 18:29:24 发布

阅读量171

点赞数

文章标签： webpack css postcss

本文链接：https://blog.csdn.net/weixin_44806635/article/details/122543551

版权

css兼容性处理

            module:{
		rules:[
			//详细loader配置
			{
				//匹配哪些文件：
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
                    // css兼容性处理：postcss-->postcss-loader postcss-preset-env
                    // 帮postcss找到package.json中browserlist里面的配置，通过配置加载指定的css兼容性样式
                    /*
                        "browserlist":{
                            "development":[//开发环境--设置node环境变量：process.env.NODE_ENV=development
                                "last 1 chrome version",
                                "last 1 firefox version",
                                "last 1 safari version"
                            ],
                            "production":[//生产环境--默认是看生产环境
                                ">0.2%",
                                "not dead",
                                "not op_mini all"
                            ]
                        }
                    */ 
                    //使用loader的默认配置
                    //‘postcss-loader’,
                    //修改loader的配置
                    {
                        loader:'postcss-loader',
                        options:{
                            ident:'postcss',
                            plugins:()=>[
                                //postcss的插件
                                require('postcss-preset-env')()
                            ]
                        }
                    }
				]
			},
		]
	},
	plugins:[
		new OptimizeCssAssetsWebpackPlugin()
	],