[JS Bundler][Ch1][Webpack] Autoprefixer(PostCSS)

1. 공급업체 접두사를 사용하기 위해 postcss, autoprefixer, postcss-loader 설치

npm install postcss autoprefixer postcss-loader

• postcss : 스타일의 후처리를 도와주는 패키지
• autoprefixer : 공급업체 접두사를 자동으로 붙여주는 패키지
• postcss-loader : postcss를 동작시켜줄 수 있는 패키지

2. webpack.config.js > 구성옵션 추가

module: {
    rules: [
      {
        // test : 변환해야할 파일 식별
        test: /\.s?css$/,   // s가 있을수도 있고 없을수도 있고 -> .scss, css로 끝나는 확장자를 찾음(정규표현식 사용)
        // use : 변환을 수행하는 데 사용해야 하는 로더
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
}

• !순서 유의!

3. package.json에 browserslist 옵션 추가

• 전세계의 1% 이상 차지하는 브라우저의 마지막 2개 버전을 지원

3. 루트 경로에 .postcssrc.js 추가 

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

4. 개발자 도구로 style 확인 시, 공급업체 접두사 표출됨