webpack處理css瀏覽器相容性問題

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於webpack處理css瀏覽器相容性的相關問題，包括了postcss-loader和postcss-preset-env插件使用的相關內容，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

 一、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()
  ],

【相關推薦：javascript影片教學、web前端】

以上是webpack處理css瀏覽器相容性問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！