Bundler

---

여러개의 파일을 하나의 파일로 묶어주는 역할을 함.

참고 블로그

Webpack vs Rollup vs Parcel
위 세가지가 가장 많이 쓰이는 번들러임.

• Webpack ➡️ 다양하고 복잡한 프로젝트에 추천 (대부분이 선호)
• Parcel ➡️ 소규모 프로젝트나, 간단하게 사용하고 싶을때 추천
• Rollup ➡️ 효율성을 고려하는 프로젝트에 추천

Webpack

---

규모있는 프로젝트에 추천하는 번들러
공식 사이트

프로젝트 생성

1. npm init -y
2. npm i -D webpack webpack-cli webpack-dev-server@next
3. package.json 폴더의 script부분에 아래의 코드 작성
   ➡️ "dev" : "webpack-dev-server --mode development"
   ➡️ "build" : "webpack --mode production"
4. webpack.config.js 파일 생성 (향후 설정용)

entry, output

webpack은 기본적으로 프로그램이 어디로 진입해줘야하는지 ➡️ entry
처리가 완료되면 결과물을 어디로 내어줘야하는지 설정해줘야함 ➡️ output

output

• output에서는, 상대경로가 아니라 절대 경로를 사용해줘야함
  node.js 에서 사용하는 path라는 전용 모듈 사용,
  "__dirname" : 현재 파일이 존재하는 경로를 지칭해줌
  근데 기본적으로 설정된 경로와 파일이름이 존재하기 때문에, 생략해줘도 상관없음.
  (dist 폴더의 main.js)

• clean: true 이 명령으로 이전의 build값 초기화.

plugins

번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정 가능

npm i -D html-webpack-plugin

정적 파일 연결

static이라는 폴더 생성 후, 각종 정적 파일들 삽입
(ex. images라는 폴더 생성 후 이미지들 삽입)

‼️ static이 빈 폴더일 경우 unable to locate glob 오류 발생!

npm i -D copy-webpack-plugin

const CopyPlugin = require('copy-webpack-plugin')

plugins:[
  new CopyPlugin({
    patterns: [
      {from: 'static'}
    ]
  })
]

CSS 적용

css 적용시키는 방법

main.js 파일에 import '../css/main.css' 선언
(wepack이 entry시에 main.js를 읽고, 거기서 연결된 css를 다음 순서로 읽는 구조)

단, css파일을 해석하려면, loader가 필요함.

npm i -D css-loader style-loader

webpack.config.js 파일에 추가

module:{
  rules: [
    {
      test: /\.css$/,
      // 정규 표현식 : .css로 끝나는 모든 파일들을 찾음
      use: [
        'style-loader',
        'css-loader'
        ]
    }
  ]
},

SCSS 적용

webpack.config.js 파일에 추가

module:{
  rules: [
    {
      test: /\.s?css$/,
      // 정규 표현식 : .css로 끝나는 모든 파일들을 찾음
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  ]
},

npm i -D sass-loader sass

Autoprefixer(PostCSS)

npm i -D postcss autoprefixer postcss-loader

webpack.config.js 파일에 추가

module:{
  rules: [
    {
      test: /\.s?css$/,
      // 정규 표현식 : .css로 끝나는 모든 파일들을 찾음
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    }
  ]
},

pakage.json 파일에 추가

"browserlist": [
  "> 1%",
  "last 2 versions"
  ]
}

루트 경로에 .postcssrc.js 파일 추가

module.exports = {
  plugins: [
    require('autoprefixer')
    ]
}

reset.css (link 태그) 삭제!

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']
  ]
}

webpack.config.js 파일에 추가

module:{
  rules: [
    {
      test: /\.js$/,
      // 정규 표현식 : .js로 끝나는 모든 파일들을 찾음
      use: [
        'babel-loader'
      ]
    }
  ]
},

npm i -D babel-loader

Netlify 배포

루트 경로에 .gitignore 파일 추가

.cache
.DS_Store
node_modules
dist

1. New site from git
2. github 해당 저장소 선택
3. 정보 확인 (만일 Build command나 폴더 directory가 다를 경우 수정)

NPX, Degit

git clone이란 명령어는 그 파일의 버젼의 내역까지 같이 가져오기 때문에,
템플릿으로 이용하는, 즉 현재의 프로젝트를 이용해서 새 프로젝트를 만들려면 npx degit이 적합함.
(or git에서 zip파일로 내려받기)

npx degit (불러오려는 git 레포지토리) (붙여넣을 폴더 이름)