Jacob Ko

Jacob Ko

Everything is Awesome 👍

Webpack

Updated:

Webpack

1.Webpack 설치

webpack 공식 페이지

image

  • Webpack 설치
$ npm init -y # npm 설치
$ npm i -D webpack webpack-cli webpack-dev-server@next # 3가지의 webpack package 설치 : webpack, wepack-cli, webpack-dev-server (이거는 앞에 cli 와 버전을 일치 시켜줘야 되기 때문에 뒤에 @next 를 붙여줌)

// in package.json 에서 설치 잘됬는지 확인해주고 script 추가

"scripts": {
  "dev": "webpack-dev-server --mode development", // 개발용 서비 작동 명령어
  "build": "webpack --mode production" // 제품화 최종 빌드 명령어
},

"devDependencies": {
  "webpack": "^5.37.0", // bundler 가 동작하기위해서의 핵심적인 package
  "webpack-cli": "^4.7.0", // command line interface 를 지원하는 package
  "webpack-dev-server": "^4.0.0-beta.3" // dev 명령을 통해 개발서버를 열때 좀 더 특화되서 새로고침을 하기 위해 도와주는 package
},
  • 개발 서버를 실행 시키기 위해서 몇가지 설정을 넣어줘야 합니다 (root 경로에 webpack.config.js 파일 생성)

2.entry, output

  • webpack.config.js 에 기본적인 구성 옵션
// in webpack.config.js

// import
const path = require("path"); // node.js 에서 기본적으로 제공하는 전역 module 인 path

// export

module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정(webpack 이 어디에서부터 파일을 불러들어 읽을 수 있는지를 설정하기)
  entry: "./js/main.js",

  // 결과물 (번들)을 반환하는 설정
  output: {
    // path 는 complie 해서 저장되는 파일의 위치 지정 (단!! node.js 에서 필요한 절대 경로를 넣어 줘야 함)
    path: path.resolve(__dirname, "dist"), // .resolve(a,b) 는  a 와 b를 합쳐주는 method, __dirname 은 현재 파일위치의 경로를 가리킴 (즉 webpack.config.js 가 root 경로에 있으니까 root 를 가리킨다고 보면 됨) 에다가 'dist' 라는 파일에
    filename: "main.js", // dist 폴더에 생성되는 파일 이름, entry 에서 들어오는 파일과 동일 이름 지정
    clean: true, // 만약 filename 을 변경하면 이전에 build 했었던 file은 자동으로 지워 지는 옵션
  },
};

$ npm run build 해서 dist 폴더에 main.js 파일 생성이 확인 됩니다.

  • 위에 작성한 path, filename은 defalut 값이기 때문에 output 에 따로 지정하지 않을 경우에 같은 경로로 만들어 집니다.

3.Plugins

  • index.html 의 내용을 브라우저에서 확인할 수 있게 개발서버를 webpack 으로 실행하기

    • 개발서버 open을 위한 webpack plugin 설치 npm i -D html-webpack-plugin

  • webpack.config.js 에서 동작을 위한 옵션 설정

// in webpack.config.js

// import html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");

module.exports = {
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    // plugin 을 배열 데이터에
    new HtmlPlugin({
      // htmlPlugin 을 생성자 함수로 실행 (index0 의 array data 로 return 되는것)
      template: "./index.html", // template 으로 index.html 지정
    }),
  ],

  devServer: {
    host: "localhost", // 개발서버 호스트 네임을 localhost 라고 지정해줌
  },
};

4.정적 파일 연결

  • 예시 파일로 Jacob’s Dev 의 favicon 을 연결해 보겠습니다.

jacob's devlog

PNG to ICO online ICO converter

  • root 경로에 static 이라는 폴더를 생성 해주고, 그 안에 favicon.ico 이미지를 넣어 줍니다 (정적파일 연결 대상)

  • static 하위 폴더에 images 폴더 생성해서 그안에 image 파일 넣어줍니다 (logo.png)

  • 파일연결을 위한 플러그인 설치 : $ npm i -D copy-webpack-plugin

  • copy-webpack-plugin 옵션 설정

// in webpack.config.js

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

module.exports = {

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [ // plugin 을 배열 데이터에
    new CopyPlugin({ // build 시, static 폴더에 있는 파일들이 dist 폴더로 copy 되서 들어가게 해주는 플러그인
      patterns: [{
        from: 'static' // root 경로에 만들어 놓은 폴더 명
      }]
    })
  ],
  • $ npm run build 시, dist 폴더에 static 에 있는 파일들이 copy 되서 들어가는것을 확인 할 수 있습니다.

image

5.Module

  • Static folder 에 넣고 나중에 dist 에 copy 해서 사용하는것 과 비슷하게 main.js 에서 module 화 작업 진행 해서도 complie 시 module 을 이용해서 파일을 build 할 수 있습니다.

  • 원리: Webpack 이 complie 시, 첫째로 main.js 부터 읽어 나가기 시작합니다. 그때, main.js 에 main.css 연결이 되어져 있으면, css 파일도 읽을 수 있는 구조가 됩니다. 그 다음에 index.html 을 읽어서 css 가 link 되있는것을 읽고 같이 complie 해서 dist 폴더로 output 하게 됩니다.

  • js 에서는 css를 해석 할 수 없기 때문에, css를 읽을 수 있는 외부 package 설치 : $ npm i -D css-loader style-loader 2개의 패키지를 설치 합니다.

// css-loader , style-loader setting in webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.css$/, // 정규식 .css 확장자로 끝나는 것을 찾는것 ($ 끝에있는거 찾는거임) -> 즉, .css 로 끝나는 모든 파일을 말함
      use: [ // 순서가 중요 style-loader 담에 css-loader
        'style-loader', // 2번 css-loader 에서 해석된 내용을 index.html 에 삽입을 해주는 package
        'css-loader' // 1번 : JS에서 CSS 를 읽을 수 있게 하는 package
      ]
    }]
  },

// in main.js
// import css
import "../css/main.css"; // main.js 에서 한번 나가서 root 경로에서 css -> main.css 로 경로 설정

이스케이프 문자(Escape String) 은 백슬래시를사용해 원래의 의미를 벗어나는 문자를 만들수 있습니다. 정규 표현식에서 .(마침표) 는 ‘임의의 한 문자’를 의마하기 때문에, 그 의미에서 벗어나 단순 마침표로 해석될 수 있도록 이스케이프 문자로 만들어 줘야 합니다.

6.SCSS

  • webpack 에서 scss 작동을 위한 2개의 pacakge 설치 : $ npm i -D sass-loader sass

    • sass-loader : webpack에서 scss 파일을 읽어 낼 수 있는 package

    • sass : 읽을 때, 사용되는 실제 sass module

// css-loader , style-loader, sass-loader setting in webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.css$/, // 정규식 .css 확장자로 끝나는 것을 찾는것 ($ 끝에있는거 찾는거임) -> 즉, .css 로 끝나는 모든 파일을 말함
      use: [ // 순서가 중요 style-loader 담에 css-loader
        'style-loader', // 3번 css-loader 에서 해석된 내용을 index.html 에 삽입을 해주는 package
        'css-loader', // 2번 : JS에서 CSS 를 읽을 수 있게 하는 package
        'sass-loader' // 1번: css-loader 가 실행되기 전에 sass-loader 실행 package
      ]
    }]
  },

// in main.js

// import scss
import "../scss/main.scss"; // main.js 에서 한번 나가서 root 경로에서 scss -> smain.css 로 경로 설정

7.Autoprefixer (PostCSS)

🔷 Vendor Prefix 란?

  • css3의 기능은 웹표준이 아니였습니다. 때문에 어떠한 속성을 주었을 때에, 브라우저마다 원하는 화면을 출력하는데 제한적입니다.

  • vender prefix 는 새로운 기능을 모두 제공해야 할 때 변환 효과를 적용하는 스타일 시트 라고 이해하는게 빠를 수 있다

image

  • CSS 스타일 부분에 앞에 붙이는 것을 공급 업체 접두사(Vender Prefix) 각각의 속성 부분에 자동으로 붙여주는 기능이 autoprefixer 입니다.

webpack autoprefixer 설정

  • 3개의 package 설치 : $ npm i -D postcss autoprefixer postcss-loader

    • postcss : css 의 스타일의 후처리를 해주는 package

    • autoprefixer : postcss 안에서 공급업체 접두사(vendor prefix를 붙여 주는) package

    • postcss-loader : webpack 에서 postcss 를 동작시켜줄수 있는 loader package

// css-loader , style-loader, postcss-loader, sass-loader  setting in webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.css$/, // 정규식 .css 확장자로 끝나는 것을 찾는것 ($ 끝에있는거 찾는거임) -> 즉, .css 로 끝나는 모든 파일을 말함
      use: [ // 순서가 중요 style-loader 담에 css-loader
        'style-loader', // 4번 css-loader 에서 해석된 내용을 index.html 에 삽입을 해주는 package
        'css-loader', // 3번 : JS에서 CSS 를 읽을 수 있게 하는 package
        'postcss-loader', // 2번: Postcss-loader 실행
        'sass-loader' // 1번: css-loader 가 실행되기 전에 sass-loader 실행 package
      ]
    }]
  },

// export autoprefixer  in postsccrc.js
module.exports = {
  // JS 파일을 node 환경에서 외부에서 내보내는 명령어
  plugins: [require("autoprefixer")],
};

// in package.json

"browerslist": [ // 전세계 1% 점유율 이상의 브라우저 중에서 마지막 2개의 버전 까지 지원하는 browerslist
    "> 1%",
    "last 2 versions"
  ]

8.babel

babel official site

  • Babel은 ECMA Script2015 (EC6) 이후 버전의 코드를 이전 JS 엔진에서 실행할 수 있게 이전 버전으로 변환하는데 주로 사용되는 JS trans complier 입니다.

  • 예) EC6 이후에서 지원되는 arrow function 을 babel 을 통해서 EC5 이하 버전에서 해석할 수 있게 function type 으로 변환 됩니다.

image

babel 설치 및 세팅

  • 3가지 package 설치 : $ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

  • 1가지 추가로 babel-loader 설치 : $ npm i -D babel-loader

// babel setting in webpack.config.js
  module: {
    rules: [{
        test: /\.s?css$/, // 확장자명 .scss 로 끝나는 전체 파일을 대상으로함, 근데 정규식 ? 을 사용하여, s가 있어도 되는경우, 없어도 되는 경우를 다 설정해줘야됨 (왜냐면 .css 파일도 있을수 있으니까..)
        use: [ // 순서가 중요 (읽는 순서는 역순임..) style-loader 담에 css-loader
          'style-loader', // 4번: css-loader 에서 해석된 내용을 index.html 에 삽입을 해주는 package
          'css-loader', // 3번: JS에서 CSS 를 읽을 수 있게 하는 package
          'postcss-loader', // 2번: postcss loader
          'sass-loader' // 1번: css-loader 가 실행되기 전에 sass-loader 실행 package
        ]
      },
      {
        test: /\.js$/, // 확장자명 .js 로 끝나는 전체파일 대상으로
        use: [
          'babel-loader' // webpack에서 babel 을 해석하기 위한 loader package 연결
        ]
      }
    ]
  },

// root 경로에 babelrc.js 에서 babel 설정

module.exports = {
  // preset-env module 내보내기
  presets: ["@babel/preset-env"], // 따로 일일히 명시해야되는 JS 를 지원해주는 pacakge
  plugins: [
    // 2차원 배열 생성
    ["@babel/plugin-transform-runtime"], // babel 이 runtime 으로 실행되기 위해 옮겨주는 package
  ],
};

9.Netilfy 배포

  • Bundler 로 생성된 프로젝트 (parcel, webpack) 를 배포하기

github 저장소에 push

  1. .gitignore 생성 (git 에 안올라갈서 정해주기)
# in .gitignore
.cache
# .DS_Store는 Mac OS 만..
.DS_Store
node_modules
dist
  1. github 에 push 하기
$ git init
$ git add .
$ git commit -m 'add webpack-template'
$ git remote add origin https://github.com/jacobkosmart/webpack-template.git
$ git push origin master

image

  1. Netilfy 에서 설정 확인

  • Github repository 와 연결 후 , build command, publish drectory 확인 하여야 함

    • build command : npm project 에서 parcel, webpack 사용할 때 제품화 하는 명령어가 동일한지 확인 (defalut : npm run build)

    • Publish directory : bundler 를 통해 complie 된 파일들이 저장된 경로 확인 (defalut : dist)

image

  1. 제품화된 배포 사이트 확인

10.NPX, Degit

  • 배포한 webpack template 을 CLI 를 통해서 new npm project 환경 setup 하기
$ npx degit jacobkosmart/webpack-template webpack-template-test # npx 를 통해 degit 을 따로 설치 하지 않아도 github repository 를 현재 경로에서 webpack-tempate-test 폴더에 pull 한다는 명령어임

  • new project 에 .git init 을 해서 버전관리를 추가해서 Project 진행 하면 됩니다.

  • git clone 저장소 주소 : 이거는 git 에 저장된 repository 를 그대로 복재 하는건데(모든 git 버전 관리된게 포함되어서..), template 경우 새로운 project 를 시작하는거기 때문에, 적합하지 않습니다.

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment

You may also enjoy