SCSS, Autoprefixer(PostCSS), babel 패키지 설치하고 웹팩 세팅 방법
SCSS
연습하면서 css로 작성했던 거 다 scss로 바꿔주기
- 루트 경로의 폴더와 그 안에 파일,
- main.js import 경로
- webpack.config.js modules에 매칭 코드(정규표현식으로 작성한 거)
- → 근데 css를 찾아야 할 수도 있으니 s 뒤에 ? 물음표 해주기
일케 하면 css랑 scss 둘 다 찾아 낼 거다./\.s?css$/
(해석) s라는 단어가 있을 수도 있고 없을 수도 있고
패키지 설치
npm i -D sass-loader sass
두 개의 패키지가 하는 역할
sass-loader를 통해서 웹팩에서 해당하는 scss파일을 읽어낼 건데,
읽을 때 그 문법을 실제로 해석해 줄 sass 모듈을 사용해야 함
그래서 두 개 설치하는 거
webpack.config.js 세팅
얘도 순서가 중요 (css 로더 설치할 때처럼)
module:{
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
Autoprefixer(PostCSS)
공급업체접두사 자동으로 붙여주는 패키지 연결해보자
패키지 설치
npm i -D postcss autoprefixer postcss-loader
—설명—
postcss라는 스타일의 후처리를 도와주는 패키지를 설치해서
그 안에서 autoprefixer라는 공급업체 접두사를 자동으로 붙여주는 플러그인을 사용할 거고
이 모든 게 웹팩에서 동작해야하기 때문에 postcss를 동작시켜줄 수 있는 loader를 같이 설치해주는 거
webpack.config.js 세팅
module rules use에 로더 넣어주기
순서가 중요함!
css 아래 scss 위에...
module:{
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
—해석—
main.scss의 내용을 sass-loader가 해석하고
그 해석된 내용을 postcss-loader를 통해 공급업체 접두사를 적용하고,
그부분의 내용을 css-loader로 읽어들여서
마지막에 style-loader로 index.html 스타일 태그로 삽입을 해줌
(이제 루트 경로 html에 css 링크 태그는 삭제해도 됨)
<link rel="stylesheet" href="./css/main.css">
이거
package.json 세팅
현재 프로젝트가 어떤 브라우저를 대상으로 지원하는지 명시
전세계의 1%이상의 브라우저에서
마지막 두 개 버전을 모두 지원
"browserslist": [
"> 1%",
"last 2 versions"
]
루트 경로에 .postcssrc.js 생성해서 구성 옵션 작성
module.exports를 통해 할당된 내용을 밖으로 내보내기
module.exports = {
plugins: [
require('autoprefixer')
]
}
babel
패키지 설치
npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
루트 경로에 .babelrc.js
생성하고, 내보내기 작성
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime']
]
}
—설명—
module.exports를 통해 객체 데이터를 내보내기
옵션으로는 presets와 plugins
presets의 경우. 우리가 일일이 명시해줘야하는 자바스크립트의 기능을 한번에 지원해주는 패키지를.
plugins의 경우 비동기 처리를 위해서 plugin-transform-runtime이라는 패키지를.
기본적인 구조로는,
presets에는 배열데이터 안에 문자데이터로 패키지 명시
plugins는 배열이 두 깊이로 들어가져 있음. (2차원 배열) 배열 안에 배열
중요한 건 이게 아니고
이 내용이 동작할 수 있도록 웹팩.config.js로 가서 세팅
babel-loader
설치하고 webpack.config.js 세팅
module rules 안에 내용 작성
{
test: /\.js$/,
use: [
'babel-loader'
]
}
아까 npm으로 골뱅이로 시작하는 바벨 패키지들 설치해서 바벨이 동작할 수 있게 했는데
그걸 결국 웹팩이 해석하려면 중간매개체 역할로 babel-loader가 필요함
js로 끝나는 확장자를 바벨 로더로 읽어들이고 분석해서 실제 바벨이 적용될 수 있게 함

웹팩 끝!!
실습 열심히 좀 따라하지 싶은 후회가 들지만
또 들을 수 있으니까 괜춘 ㅇㅇ
내일부터 Vue!
근데 복습양이 진도 나간 양을 따라가지 못하네
....ㅠ
https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online
'패스트캠퍼스' 카테고리의 다른 글
Vue eslint 등 [패스트캠퍼스 챌린지 27일차] (0) | 2021.10.02 |
---|---|
Vue 시작하기 [패스트캠퍼스 챌린지 26일차] (0) | 2021.10.01 |
webpack plugin, 정적파일 연결, module[패스트캠퍼스 챌린지 24일차] (0) | 2021.09.29 |
바벨, webpack[패스트캠퍼스 챌린지 23일차] (0) | 2021.09.28 |
Bundler [패스트캠퍼스 챌린지 22일차] (0) | 2021.09.27 |