Webpack - Autoprefixer

Autoprefixer: 구형 브라우저에 최신의 css 기술을 적용 시키기 위해 공급업체 접두사를 자동으로 붙여주는 기능

 

display를 이욯하여 테스트

기존의 작성한 scss 파일에 display: flex를 설정

display: flex;

브라우저에서 동작하는지 확인

명령어: npm run dev

 

터미널에서 3가지 패키지를 설치

• postcss: 스타일의 후처리를 도와주는 패키지
• autoprefixer: 공급업체 접두사를 붙여주는 패키지
• postcss-loader: webpack에서 사용할 수 있도록 도와주는 패키지

명령어: npm i -D postcss autoprefixer postcss-loader

package.json 파일에서 확인

 

webpack.config.js -> rules -> use 의 내용을 추가 한다.

// 공급업체 접두사 및 postcss를 사용하기 위해서 설정
'postcss-loader',

이전과 마찬가지로 순서가 중요하다. sass-loader가 먼저 동작해야한다.

 

package.json 파일에서 어떤브라우저를 지원할지 browserslist를 추가로 설정한다.

 

"browserslist": [
    "> 1%",
    "last 2 version"
  ]

전세계 1% 이상 사용되는 브라우저에서 마지막 2버전을 모두 지원하도록 설정

 

root 경로의 .postcssrc.js을 생성한다.

// module.exports를 이용하여 핟당된 내용을 밖으로 내보내는 기능
// node.js에서 동작
module.exports = {
  plugins: [
    // autoprefixer패키지를 require을 함수를 이용하여 직접 연결할 수 있도록 설정
    require('autoprefixer')
  ]
}

브라우저에서 확인 (공급업체 정보가 적혀있는지 확인)

개발자 도구에서 확인