日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

成都創(chuàng)新互聯(lián)公司是專業(yè)的東城網(wǎng)站建設(shè)公司，東城接單;提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行東城網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

一、css兼容性處理

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

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

默認(rèn)會走生產(chǎn)環(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;

運(yùn)行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瀏覽器兼容性問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。