webpack は CSS ブラウザーの互換性の問題を処理します

この記事では、javascript に関する関連知識を提供します。主に、postcss-loader や postcss-preset-env など、Webpack による CSS ブラウザー処理の互換性に関する問題を紹介します。関連する内容を見てみましょう。プラグインの使用に関する内容ですので、皆様のお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

1. 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 のブラウザリスト

実稼働環境の設定がデフォルトで使用されます。開発環境の設定を使用したい場合は、webpack.config.js にコードを追加する必要があります:

process.env.NODE_ENV = "development"

3. webpack での設定は以下の通りです (公式ドキュメントの最新の設定属性によると、webpack4 の記述方法は異なることに注意してください) webpack5 の記述方法!!!)

         {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [['postcss-preset-env', {}]]
              }
            }
          }

テスト:

次の 2 つの属性を CSS ファイルに追加できます:

  display: flex;
  backface-visibility: hidden;

webpack コマンドを実行してパッケージ化し、パッケージ化された CSS ファイルを表示します:

css 互換性処理の終了

2. 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 中国語 Web サイトの他の関連記事を参照してください。