webpack如何處理css瀏覽器兼容性問題

今天小編給大家分享一下webpack如何處理css瀏覽器兼容性問題的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、css兼容性處理

1.首先需要在package.json中添加以下代碼，后續(xù)會用到【這里的配置可根據(jù)項目需求來】

  "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中的瀏覽器兼容性配置

默認會走生產環(huán)境的配置，若想走開發(fā)環(huán)境的配置需要在webpack.config.js中添加代碼：

process.env.NODE_ENV = "development"

3.webpack中配置如下：（注意按官方文檔的最新配置屬性來，webpack4的寫法與webpack5的寫法不同哦！?。。?/strong>

         {
            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瀏覽器兼容性問題”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。