webpack如何处理css浏览器兼容性问题
本文讲解"webpack怎么处理css浏览器兼容性问题",希望能够解决相关问题。
一、css兼容性处理
1.首先需要在package.json中添加以下代码,后续会用到【这里的配置可根据项目需求来】
"browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] }
2.安装插件:postcss-loader和postcss-preset-env
postcss-preset-env帮助postcss-loader找到package.json中browserslist中的浏览器兼容性配置
默认会走生产环境的配置,若想走开发环境的配置需要在webpack.config.js中添加代码:
process.env.NODE_ENV = "development"
3.webpack中配置如下:(注意按官方文档的最新配置属性来,webpack4的写法与webpack5的写法不同哦!!!)
{ loader: 'postcss-loader', options: { postcssOptions: { plugins: [['postcss-preset-env', {}]] } } }
测试:
我们在css文件中可以添加以下两个属性:
display: flex; backface-visibility: hidden;
运行webpack指令打包后查看打包后的css文件:
css兼容性处理end
二、css压缩
1、安装插件:css-minimizer-webpack-plugin
2、使用方法:webpack.config.js中:
引入:
const cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
配置:
plugins: [ new cssMinimizerWebpackPlugin() ],
关于 "webpack怎么处理css浏览器兼容性问题" 就介绍到此。希望多多支持编程宝库。
webpack中如何压缩打包html资源:本文讲解"webpack中怎么压缩打包html资源",希望能够解决相关问题。为什么需要打包html资源写代码时引入的是src下面的js文件,经过webpack打包后,形成了一个入口文件,此时html ...