본문 바로가기

패스트캠퍼스

webpack 나머지 패키지 설치 [패스트캠퍼스 챌린지 25일차]

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