번들링과 웹팩

번들링(bundling)

번들 이란?

현대 웹 개발에서, 프론트엔드 개발자에게 번들은 “사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"

번들링이 필요한 이유

현대 웹으로 들어 오게 되면서 하나의 JS ,HTML ,CSS만 연결 되어 있는게 아니라 수많은 파일들이 연결 되게 되면서 그만큼 불러오는 파일들의 용량이 늘어나게 되어 로딩이 느려지거나 다른 파일에서 변수가 겹치게 되는 등의 상황이 와 오류가 발생할 수 있게 되어 이를 방지하기 위해 사용 합니다.

웹팩(Webpack)

Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미하며,
모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구입니다.
웹팩 공식 홈페이지는 한글로도 지원합니다.
Webpack 공식 페이지

웹팩 설치법

npm install webpack //웹팩 인스톨
npm install webpack-cli // 웹팩의 커맨드를 터미널에서 실행할 수 있는 npm 

웹팩의 핵심 속성

루트 폴더에 webpack.config.js 파일을 생성하면 webpack이 자동으로 이 파일을 사용합니다.

웹팩을 사용할 때 webpack.config.js에서 사용하는 속성들이 있다.

Entry : 웹 자원의 변환을 위한 진입점(→ 자바스크립트 파일의 경로)
Output : 웹팩의 번들링된 결과물이 위치하게 될 파일의 경로
Loader : 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 것들을 변환할 수 있도록 도와주는 속성
Plugin : 웹팩의 기본 동작에 추가적인 기능을 제공하는 속성
Mode : 웹팩의 실행 방법을 결정하는 속성

//webpack.config.js

const path=require("path") // // Node.js 모듈 path 불러오기

module.esports = {
	entry : "./src/index.js", // 엔트리 파일 설정
    output : { // 아웃풋 파일 설정
    	path : path.resolve(__dirname,"dist") // 절대 경로로 설정
        filename : "app.bundle.js",
  	},
    module:{		// Loader를 이용하여 다른 형식의 파일을 읽을 때 사용 해당 예시는 css파일을 불러오기 위해 사용 됨
    	rules:[
        	{
            test:/\.css$/,
            use:["style-loader","css-loader"],
            exclude:/node_modules/,
            },
           ],
    },
    plugins:			// 플러그인 사용 플러그인 사용 시에는 require하여 불러와야함
    [new HtmlWebpackPlugin({
    		template : path.resolve(__dirname,"src","index.html")
    })]
 };
    

여러 개의 entry를 이용하려면 어떻게 해야하는 지 찾아 봤는데
만약 entry를 여러 개를 하고 싶다면 객체 속성으로 만들어 여러개를 만들고 ,
output.filename에 [name].bundle.js으로 작성 한다.