webpack은 CSS 브라우저 호환성 문제를 처리합니다.

이 기사에서는 postcss-loader 및 postcss-preset-env 플러그인 사용에 대한 관련 내용을 포함하여 webpack의 CSS 브라우저 호환성과 관련된 문제를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. , 모든 사람에게 도움이 되기를 바랍니다.

【관련 권장사항: javascript video tutorial, web front-end】

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의 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 호환성 처리 종료

2.

1. 플러그인 설치: css-minimizer-webpack-plugin

2. 사용 방법: webpack.config.js에서:

소개:

const cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

구성:

  plugins: [
    new cssMinimizerWebpackPlugin()
  ],

[관련 권장 사항: javascript 동영상 튜토리얼, 웹 프론트엔드]

위 내용은 webpack은 CSS 브라우저 호환성 문제를 처리합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!