Bundler[Webpack] - Autoprefixer(PostCSS)
01.Autoprefixer
- 공급업체 접두사를 자동으로 진행해주는 패키지
autoprefixer
를webpack
을 통해 설치하는 방법에 대해 알아봅니다.
02.Autoprefixer 패키지 설치 전
main.scss 파일 설정
$color---black: #000; $color---white: #fff; body { background-color: $color---black; h1 { color: $color---white; font-size: 40px; display: flex; } }
h1
태그 속성에display: flex;
설정을 해줍니다.개발 서버 실행
$ run npm dev
Autoprefixer
가 설정되어 있지 않는것을 확인할 수 있습니다.
03.Autoprefixer 설치 & 설정
3-1.패키지 설치 & 확인
$ npm i -D postcss autoprefixer postcss-loader
postcss
,autoprefixer
,postcss-loader
총 3가지 패키지를 개발용으로 설치해줍니다.postcss
는 스타일의 후처리를 도와주는 패키지로 그 안에서autoprefixer
라는 공급 업체 접두사를 자동으로 붙여주도록 설치합니다.- 마지막으로 이 두 패키지가
webpack
에서 동작할 수 있도록postcss-loader
를 설치해줍니다.- package.json
"devDependencies": { "copy-webpack-plugin": "^9.1.0", "css-loader": "^6.7.1", "html-webpack-plugin": "^5.5.0", "sass": "^1.50.0", "sass-loader": "^12.6.0", "style-loader": "^3.3.1", "webpack": "^5.72.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.0.0-rc.1" }, "dependencies": { "autoprefixer": "^10.4.4", "postcss": "^8.4.12", "postcss-loader": "^6.2.1" }, "browserslist": [ "> 1%", "last 2 versions" ]
3-2.postcss-loader 삽입
module: { rules: [ { test: /\.s?css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader' ] } ] }
webpack.config.js
파일에module
옵션을 코딩해줍니다.- 반드시 순서를 위와 같이 코딩해주셔야 합니다.
sass-loader
로SCSS
파일을 읽어온 후post-loader
로 공급 업체 접두사를 적용하여post-css
의 플러그인들을 사용할 수 있는 것입니다.- 그리고 이를
css-loader
로 읽어들여 마지막으로style.loader
로index.html
에style
태그로 삽입할 수 있도록 하는 것입니다.webpack.config.js
// import const path = require("path"); const HtmlPlugin = require("html-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin"); // export module.exports = { // parcel index.html // 파일을 읽어들이기 시작하는 진입점 설정 entry: "./js/main.js", // 결과물(번들)을 반환하는 설정 output: { // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환 // filename: "main.js", clean: true }, module: { rules: [ { test: /\.s?css$/, // .scss 또는 .css확장자로 끝나는 파일을 찾는 정규 표현식 use: [ "style-loader", // main.css에 해석된 내용을 삽입하는 패키지 "css-loader", // JS에서 CSS 파일을 해석하는 패키지 "postcss-loader", // 공급업체 접두사를 적용해주는 패키지 "sass-loader" ] } ] }, // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정 plugins: [ new HtmlPlugin({ template: "./index.html" }), new CopyPlugin({ patterns: [ { from: "static" } // static 폴더안에 있는 내용들이 복사되어 dist폴더 안에 들어갈 수 있게 설정하는 옵션 ] }) ], devServer: { host: 'localhost' } }
3-3.package.json
package.json
파일에browerslist
옵션을 코딩해줍니다.browerslist
옵션은 현재NPM
프로젝트에서 지원할 브라우저의 범위를 명시하는 용도입니다.
"browserslist": [ "> 1%", "last 2 versions" ]
- 이것은 현재 프로젝트에서 전 세계의 점유율이
1%
이상인 모든 브라우저의 마지막2
개 버전까지 모두 지원을 하겠다는 의미입니다.
3-4.postcssrc.js 파일 생성
.postcssrc.js
마침표로 시작하는rc
(runtime configuration
) 파일, 즉 구성 파일을 만들어줍니다.- 마침표로 시작하는 것은 구성 옵션이나 숨김 파일을 의미합니다.
import & export
.postcssrc.js
파일 내에 아래 내용을 코딩해줍니다.module.exports = { plugins: [ require('autoprefixer') ] }
- 주로 사용하는
import
,export
키워드는node.js
환경에서 사용이 불가하여CommonJS
방식인require()
,module.exports
키워드를 이용하여JavaScript
파일을 가져오고 내보냅니다.
04.개발 서버 오픈
$ npm run dev
- 개발 서버를 열어서 패키지가 잘 동작하는지 확인합니다.
Autoprefixer 패키지 설치 후
Author And Source
이 문제에 관하여(Bundler[Webpack] - Autoprefixer(PostCSS)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlsdnjs156/BundlerWebpack-AutoprefixerPostCSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)