step 1

Webpack, Parcel 번들러를 터미널을 이용해서 손쉽게 다운 받는 방법

VsCode를 새창으로 열어준다

터미널에서 아래와 같이 원하는 프로젝트 경로로 이동해준다.

npx를 사용하여야 하는데 그러기 위해서는 node.js환경이 설치되어 있어야 한다.

NPM :: step 1 (tistory.com)

degit: 원격 저장소의 내용을 내려 받을 수 있는 명령어

다운 받을 저장소를 github에서 확인

명령어 입력(npx degit github저장소 / 생성할 프로젝트 이름)

: npx degit ohet9409/bundler_webpack webpack-template-test

원격저장소가 private로 되어있으면 아래와 같은 에러가 발생한다.

터미널에서 dir 명령어를 입력하여 확인(mac은 ls 명령어 사용)

webpack-template-test 폴더가 생성되었다.

명령어: cd webpack-template-test 입력하여 해당 폴더로 이동

명령어: code . -r 입력하여 현재 폴더를 VsCode로 열어준다.

현재 폴더를 확인하면 전혀 버전관리가 되어있지않아서 처음부터 버전관리를 시작할 수 있다.

원하는 원격저장소의 이전버전과 함께 프로젝트 파일을 받기 위해서는 git clone 명령어를 이용하여 다운받는다.

배포를 진행하기 위해서는 미리 github에 저장해두어야한다.

이전 게시물 참고

VS Code에서 git(github)사용하기 (버전관리 방법) :: step 1 (tistory.com)

github를 이용한 배포 방법(Netlify) :: step 1 (tistory.com)

netlify 사이트 접속 -> 로그인 후 아래 화면 클릭

github 지속저인 배포 선택

원하는 저장소 선택

setting 확인

npm run build는 제품화할 때 입력하는 명령어

dist/ 기본적으로 동작되는 폴더

버튼 클릭 후 대기 하면 확인 될 수 있다.

사이트가 생성된것을 아래 화면에서 확인할 수 있다.

브라우저에서 링크를 클릭하고 확인

webpack과 parcel 모두 동일한 방법으로 배포를 진행 할 수 있다.

babel: 최신 문법의 자바스크립트 문법을 모든 브라우저에서 사용할 수 있도록 도와주는 도구

공식 사이트: https://babeljs.io/docs/en/

참고 사이트: [Babel] Babel 의 역할, 기본적인 사용법 (tistory.com)

터미널에서 3가지 패키지 설치

@babel/core:

@babel/preset-env

@babel/plugin-transform-runtime

명령어: npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

package.json 파일에서 확인

root 경로의 .babelrc.js 파일을 생성

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

webpack.config.js 파일에서 js파일을 사용할 수 있도록 설정한다.

 {
        // js파일로 끝나는 파일을 찾아서 babel-loader를 이용하여 실행시키도록 설정
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
 }

여러 파일들을 각자의 loader를 이용하여 실행시킬 수 있다.

babel을 사용하기 위해서 패키지 설치

명령어: npm i -D babel-loader

package.json 파일에서 확인

Autoprefixer: 구형 브라우저에 최신의 css 기술을 적용 시키기 위해 공급업체 접두사를 자동으로 붙여주는 기능

display를 이욯하여 테스트

기존의 작성한 scss 파일에 display: flex를 설정

display: flex;

브라우저에서 동작하는지 확인

명령어: npm run dev

터미널에서 3가지 패키지를 설치

• postcss: 스타일의 후처리를 도와주는 패키지
• autoprefixer: 공급업체 접두사를 붙여주는 패키지
• postcss-loader: webpack에서 사용할 수 있도록 도와주는 패키지

명령어: npm i -D postcss autoprefixer postcss-loader

package.json 파일에서 확인

webpack.config.js -> rules -> use 의 내용을 추가 한다.

// 공급업체 접두사 및 postcss를 사용하기 위해서 설정
'postcss-loader',

이전과 마찬가지로 순서가 중요하다. sass-loader가 먼저 동작해야한다.

package.json 파일에서 어떤브라우저를 지원할지 browserslist를 추가로 설정한다.

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

전세계 1% 이상 사용되는 브라우저에서 마지막 2버전을 모두 지원하도록 설정

root 경로의 .postcssrc.js을 생성한다.

// module.exports를 이용하여 핟당된 내용을 밖으로 내보내는 기능
// node.js에서 동작
module.exports = {
  plugins: [
    // autoprefixer패키지를 require을 함수를 이용하여 직접 연결할 수 있도록 설정
    require('autoprefixer')
  ]
}

브라우저에서 확인 (공급업체 정보가 적혀있는지 확인)

개발자 도구에서 확인

root 경로에 scss 폴더, 파일 생성

webpack의 진입점인 main.js파일에 scss파일을 import 시킨다.

import '../scss/main.scss'

webpack.config.js 파일의 scss를 읽을 수 있도록 module에 설정한다.

자세한 설정은 이전 게시물 (Weppack - module)을 참고

// .css, .scss파일을 찾도록 하는 정규표현식
        test: /\.s?css$/,

SCSS를 읽고 적용시킬수 있는 패키지를 설치한다.

명령어: npm i -D sass-loader sass

package.json 파일을 확인한다.

webpack.config.js파일에 sass-loader가 동작하도록 설정 (순서가 중요)

main.scss파일을 수정

$color--black: #000;
$color--white: #fff;

body {
  background-color: $color--black;
  h1 {
      color: $color--white;
      font-size: 40px;
  }
}

브라우저에서 확인

Root 경로의 css파일을 읽어 오는 방법

폴더 및 파일 생성

main.css

body {
  background-color: skyblue;
}

main.js 파일에 css파일을 연결한다.

// root 경로의 css파일을 main.js 파일로 가져온다.
// 그렇게 되면 webpack이 실행될때 처음 main.js파일을 읽어서 가져오기 때문에 dist 폴더에 css 파일이 생성된다.
// js파일의 현재 위치를 기준으로 css파일을 찾기때문에 상위로 이동해서 찾도록 설정
import '../css/main.css'

webpack.config.js 파일에서 진입점 확인

webpack자체는 css 파일을 읽어 올 수 없기 때문에 현재는 dist 파일에 css 파일을 생성해 주는 정도의 기능만 제공한다.

따라서 css파일을 읽을 수 있는 패키지를 설치해 주어야 한다.

명령어:  npm i -D css-loader style-loader

packge.json  파일에서 확인

webpack.config.js 파일에서 module.exports 안에 output 뒤에 설정

 module: {
    rules: [
      {
        // .css파일을 찾도록 하는 정규표현식
        test: /\.css$/,
        use: [ // 먼저 css-loader가 읽히고 style-loader가 동작한다. 순서가 중요하다.!!
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

use 부분의 순서가 중요하다.

뒤에 plugin 설정이 되어있기 때문에 쉼표(,) 를 작성해준다.

실행: npm run dev

브라우저 확인