Webpack

Webpack 이란 ?

웹 브라우저에서 웹페이지를 프로그래밍 적으로 더 동적으로 제어하는 기술인 자바스크립트를 더 잘 다루기 위한 기술 웹팩은 웹에서 사용되는 모든 자원을 번들링 해주는 도구이다. JS 파일 뿐만 아니라 CSS, HTML, Image 등을 모듈로 로드해서 사용할 수 있다.

bundle 이란?

bundle 이라는 뜻은 '묶음' 이라는 뜻이다. 요새 하나의 HTML 파일에 여러 JS 파일을 만들어서 SPA 방식으로 웹페이지를 제작하는데 여러 JS 파일들을 하나의 파일로 묶어줘서 관리하기 편하게 해준다. JS 뿐만 아니라 웹팩의 주요 구성요소인 로더 ( Loader )를 통해 타양한 타입의 파일들도 번들링이 가능하다. 같은 타입의 파일을 묶어서 서버에 요청/응답 받기 때문에 웹페이지 성능을 최적화 해준다.

모듈 ( module ) 이란?

프로젝트를 진행함에 있어 예상 코드가 몇 만줄이나 된다면 하나의 js 파일안에 관리한다면 매우 불편할 것이다. 하나의 오류로 인해 또 다른 곳에서 생기기도 하고 변수나 함수명도 겹칠 수 있기 때문이다. 이러한 방식은 매우 비효율적이기 때문에 모듈이라는걸 사용한다 모듈은 프로그램의 꾸러미라고 할 수 있다. 자주 쓰는 함수를 모듈에 넣어뒀다가 다른곳에서 필요할 때 가져와서 사용할 수 있도록 해준다.

Babel 이란?

• 요즘 JS의 문법을 대부분 ES6 문법을 사용하고 있는데 ES6는 익스플로러가 못 읽는 것들이 많기 때문에 익스플로러도 읽을 수 있게 ES5로 변환해준다.

Webpack 사용법

webpack을 사용하기 위해서는 먼저 컴퓨터에 node.js가 설치가 되어있어야 npm 명령어를 사용할 수 있다. node.js 설치는 https://nodejs.org/ko/ 들어가서 둘중 하나를 다운받으면 된다.

node.js 설치가 끝났다면 VSCode 터미널을 켜서 node -v 명령어를 입력하면 설치의 여부를 확인할 수 있다.

npm 이란?

Node Package Manager의 약어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저이다.

자주쓰는 npm 명령어

• npm -v : npm의 버전을 확인할 때 사용
• npm init : webpack을 구성하기 전에 node modules 관리를 위해 'package.json'을 만들어주는 명령어 ( 배포할 때 반드시 필요하다. )
  npm init 을 하게되면 cmd에 프로젝트에 대한 여러 정보를 쳐야하는데
  npm init -y로 건너뛰고 'package.json'을 만들 수 있다.
  
• npm i -D html-loader html-webpack-plugin : html을 webpack이 읽게 해주고 build 폴더안에 번들링한 html파일이 생성된다.
• npm i -D css-loader style-loader : css를 webpack이 읽게 해준다.
• npm i -D file-loader : 이미지, 동영상 등을 webpack이 읽게 해준다. png|jpg|jpeg|avi|mp4|wav|ico|bmp|gif|svg 등
• npm i -D sass sass-loader : sass를 webpack이 읽게 해준다.
• npm i vue : vue를 사용할 수 있게 한다.
• npm i -D vue-loader vue-template-compiler : vue를 webpack이 읽게 해준다.

Webpack 기본 구성 절차

1. npm init or npm init -y로 package.js 생성

2. npm i -D webpack webpack-cli 설치

(폴더명을 webpack으로 하면 충돌이 생겨서 설치되지 않는다. )
webpack은 핵심 패키지로 webpack v3 까지는 webpack만 설치하였으나 webpack v4 부터는 webpack-cli도 같이 설치해야한다.

3. src 폴더를 만들고 그 안에 index.js 와 index.html 생성

4. bulid 폴더를 만들고 아래 다 작성하고 npm run build 하면 index.html과 index.js가 만들어 진다.

5. webpack.config.js 파일 생성

webpack.config.js는 웹팩 구성 파일이다 웹팩 구성 파일의 주요 속성인
path, entry, output, loader, plugins, mode가 있다.

• mode : webpack의 mode를 정해준다. ( 개발 모드 = development, 배포 모드 = production, 논 모드 = none 기본값은 production 이다. )

mode: 'development'

• entry : build의 대상이 될 파일 ( 번들을 설정하기 위한 진입점 ) entry의 default값은 src폴더로 설정되어있다.
  entry 의 경로를 설정하여 default값을 변경한다.
  string : 문자열이 들어오는 경우 시작시 로드되는 모듈로 해석
  array : 시작이 모든 모듈이 로드된다. 마지막 하나가 내보내진다.
  object : 다중 항목 번들이 작성된다.

entry: __dirname + '/src/index.js'

• output : build 결과를 저장할 경로 ( 파일명과 폴더의 경로를 설정 )

output : {
  	path : __dirname + '/build' // 배포할 폴더 경로
	filename : 'index.js', // 배포할 파일명
}

• path : 파일의 경로를 다루고 변경하는 유틸리티
• plugins : 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다. build 된 bundle 파일을 동적으로 특정 html 페이지에 추가 할 수 있으며 build시에 javascript, css, html 등의 파일을 압축해준다. 웹팩의 핵심으로 로더가 할 수 없는 일들을 수행할 수 있다. 해당 결과물의 형태를 바꾼다. 번들된 파일을 난독화, 압축, 핫리로딩, 파일복사, 파일추출, 별칭사용 등의 부가적인 작업을 할 수 있다. plugins 속성에 new 인스턴스를 전달해야 한다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
	plugins : [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			filename: 'index.html'
        })
	]
}

HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인

• resolve : webpack 모듈 번들러의 경우 어떤 위치에서 어떻게 로드해줄지가 중요하다. import의 경로를 훨씬더 편하게 만들어 준다.
  option
  alias: 모듈을 로드할 때 별칭을 사용하여 더 쉽게 로드할 수 있게 해준다.
  extensions: 모듈을 로드할 때 확장자를 생략 가능하다.

resolve: {
    extensions: ['*', '.vue', '.js'], // import할때 .vue, 
                                      // .js확장자 생략가능
    alias: {
      '@': __dirname + '/src' 
       // import할때 파일경로 앞부분 생략가능
    }
  }

6. loader 설정

webpack은 JS파일만 읽어 올 수 있기 때문에 css, html, vue, image 등을 웹팩이 읽을 수 있는 모듈로 변경해 주는 역할을 한다. ( css 파일을 자바스크립트 모듈에서 직접 import 할 수 있는 방법도 제공한다. )
npm 명령어를 통해 설치해서 module.reles 안에 설정한다.

예를 들어 CSS Loader를 적용할려면

npm i -D css-loader style-loader 두개를 설치한 후에

module: {
	rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
      ]
}

이렇게 작성해준다.
module.rules는 여러개의 로더 지정이 가능하고 test는 변환 할 파일을 지정하고 use는 변환 할 파일에 지정할 로더를 설정한다. 앞에 test는 정규식으로 .css로 끝나는 확장자를 뒤에 로더를 쓴다는 것이다.

package.json 설정

package.json 파일안에 "scripts" 부분이 있는데

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --hot --port 80 --mode development"
  },

-- mode production을 하면 번들링된 파일들이 가시화로 한줄로 쭉 나오게 된다.

"devDependencies" : 내가 설치한 webpack 관련 것들의 버전을 확인할 수 있다.

출처 - https://velog.io/@yon3115/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%95%84%EC%88%98-Webpack%EC%9D%B4%EB%9E%80
https://webclub.tistory.com/636?category=718289
https://www.youtube.com/watch?v=cp_MeXO2fLg&list=PLuHgQVnccGMChcT9IKopFDoAIoTA-03DA&index=1
https://hoony-gunputer.tistory.com/entry/webpack-resolve