autoprefixer

공급업체 접두사를 자동으로 진행해주는 패키지 autoprefixer를 webpack을 통해 설치하는 방법에 대해 이야기해보도록 하겠습니다.

먼저, 정상적으로 작동하는지를 확인하기 위해 scss파일 내부에 display:flex 속성을 넣어줍니다.

1. 패키지 설치(postcss && autoprefixer && postcss-loader)

$ npm i -D postcss autoprefixer postcss-loader

• postcss는 스타일의 후처리를 도와주는 패키지입니다.
• postcss가 스타일의 후처리를 하는 과정에서 autoprefixer라는 공급 업체 접두사를 자동으로 붙여주도록 설치합니다.
• 두 패키지가 webpack에서 동작할 수 있도록 postcss-loader를 설치해줍니다.

설치가 종료되면 webpack.config.js의 module옵션에 아래 순서에 맞춰 작성을 해줍니다.

webpack.config.js

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

• sass-loader로 SCSS 파일을 읽어옵니다.
• post-loader로 공급 업체 접두사를 적용하시키거나 또는 post-css의 플러그인들을 사용합니다.
• 처리된 내용을 css-loader로 읽어들여 마지막으로 style.loader로 index.html에 style 태그로 삽입할 수 있도록 합니다.

2. browerslist 옵션(package.json 내부)

package.json 파일에 browerslist 옵션을 명시해줍니다. browerslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도입니다.

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

위 내용은 현재 프로젝트에서 전 세계의 점유율이 1% 이상인 모든 브라우저의 마지막 2개 버전까지 모두 지원을 하겠다는 의미입니다.

3. .postcssrc.js 파일 생성

루트경로에 구성옵션인 .postcssrc.js 파일을 만들어줍니다. (마침표로 시작하는 것은 구성 옵션이나 숨김 파일을 의미합니다.)

.postcssrc.js 파일 생성 후 구성옵션을 작성해줍니다.

//require함수를 통해 패키지를 가져온 후 module.exports을 통해 할당된 내용을 내보내기 합니다.

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

node.js 환경에서는 import, export 키워드 사용이 불가하기 때문에 CommonJS 방식인require(), module exports 키워드를 이용하여 작성해줍니다.

4. 개발서버 열어서 확인

개발서버를 오픈해 확인해보면 위와 같이 display: flex주변에 공급업체 접두사가 붙어 있는 것을 확인할 수 있습니다.