[Webpack] 벤더 프리픽스(Vendor Prefix)를 자동으로! Autoprefixer

💻 Autoprefixer 설치

벤더 프리픽스를 자동으로 붙여주는 Autoprefixer를 설치해보자

1. 터미널에 npm i -D postcss autoprefixer postcss-loader 입력

2. webpack.config.js의 module 수정

module: {
          rules: [
              {
                  test: /\.s?css$/,
                  use: [
                      'style-loader',
                      'css-loader',
                      'postcss-loader',
                      'sass-loader'
                  ]
              }
          ]
      },

use에 postcss-loader를 추가하고 순서에 주의하자.

3. package.js파일에 browserslist 추가

"browerslist": [
      "> 1%",
      "last 2 versions"
    ]

4. 루트 경로에 .postcssrc.js 파일 생성 후 아래 내용 저장

module.exports = {
      plugins: [
          require('autoprefixer')
      ]
  }

5. 터미널에 npm run dev

여기서 에러가 난다면 터미널에 npm i -D autoprefixer@9 를 입력해 autoprefixer를 버전으로 다운그레이드 하고 package.json에 다음을 추가하자.

  "postcss": {
      "plugins": {
        "autoprefixer": {}
      }
    }