webpack對css進行各大平台瀏覽器的兼容性處理

我們在開發配置環境時，總是能需要css兼容瀏覽器，才能顯示效果 這裏記錄一下webpack對css的兼容性處理（使用的是postcss）

1.首先先創建好對應的目錄，以及文件 2.下載對應的loader

npm i postcss-loader postcss-preset-env -D

3.重點：兼容css的寫法

module:{
 rules:[
 {




 test:/.css$/,
 use:[
 //'style-loader', //創建style標簽，將樣式放入
 MiniCssExtractPlugin.loader, //這個loader取代style 作用：提取js中的css成單獨文件
 'css-loader',//將css文件整合到js文件中
 //使用loader的默認配置
 // 'postcss-loader',
 //詳細修改loader的配置
 {
 loader:'postcss-loader',
 options:{
 postcssOptions:{
 ident:'postcss',
 plugins:[
 require('postcss-preset-env')
 ],
 //下面這樣寫沒有出現有兼容性代碼
 // plugins:() => [
 // //postcss的插件
 // require('postcss-preset-env')()
 // ]
 }
 }
 }
 ]
 }
 ]
 },

特別注意：plugins:() => [require(‘postcss-preset-env’)()]這樣的寫法，webpack打包時不會報錯，但是它沒有出現我們想要的瀏覽器兼容的效果（對應的樣式沒有變化）， 正確的寫法如上。
4.postcss-preset-env幫postcss找到package.json中browserslist裏面的配置，通過配置加載指定的css兼容性樣式，所以我們package.json的配置為如下

//具體更多的配置可以去postcss上查詢
"browserslist": {
 "development": [//開發環境下的
 "last 1 chrome version", //兼容最新的chrome
 "last 1 firefox version",//兼容最新的firefox
 "last 1 safari version"//兼容最新的safari
 ],
 "prodection": [ //生產環境下:默認是看生產環境的
 ">0.2%", //兼容百分之98的瀏覽器
 "not dead", //不要已經死的瀏覽器
 "not op_mini all" //不要op_mini
 ]
 }

5.具體的webpack.config.js代碼

/*
 將css進行兼容性處理
 1. npm i postcss-loader postcss-preset-env -D
*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//設置nodejs環境變量-》才能測試開發環境下的
// process.env.NODE_ENV = 'development';
module.exports = {
 entry: './src/js/index.js',
 output:{
 filename:'js/build.js',
 path:resolve(__dirname, 'build')
 },
 module:{
 rules:[
 {
 test:/.css$/,
 use:[
 //'style-loader', //創建style標簽，將樣式放入
 MiniCssExtractPlugin.loader, //這個loader取代style 作用：提取js中的css成單獨文件
 'css-loader',//將css文件整合到js文件中
 /**
 * css兼容性處理:postcss > postcss-loader postcss-preset-env
 *
 * postcss-preset-env幫postcss找到package.json中browserslist裏面的配置，通過配置加載指定的css兼容性樣式
 *
 * "browserslist":{
 "development":[ //開發環境下的 如果要看開發環境 要設置node環境變量：process.env.NODE_ENV = development
 "last 1 chrome version",
 "last 1 firefox version",
 "last 1 safari version"
 ],
 "prodection":[ //生產環境下:默認是看生產環境的
 ">0.2%", 兼容百分之98的瀏覽器




 "not dead", 不要已經死的瀏覽器
 "not op_mini all" 不要op_mini
 ]
 }
 *
 *
 */
 //使用loader的默認配置
 // 'postcss-loader',
 //詳細修改loader的配置
 {
 loader:'postcss-loader',
 options:{
 postcssOptions:{
 ident:'postcss',
 plugins:[
 require('postcss-preset-env')
 ],
 //下面這樣寫沒有出現有兼容性代碼
 // plugins:() => [
 // //postcss的插件
 // require('postcss-preset-env')()
 // ]
 }
 }
 }
 ]
 }
 ]
 },
 plugins:[
 new HtmlWebpackPlugin({
 template:'./src/index.html'
 }),
 new MiniCssExtractPlugin({
 //對css重命名 以及放在css目錄下
 filename:'css/build.css'
 })
 ],
 mode:'development'
}

6.打包後結果如圖所示：
這樣就完成了對css瀏覽器的兼容，歡迎大家有問題的一起討論呀