[Webpack] autoprefixer
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주변에 공급업체 접두사가 붙어 있는 것을 확인할 수 있습니다.
Author And Source
이 문제에 관하여([Webpack] autoprefixer), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@0seo8/Webpack-autoprefixer저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)