Webpack: What is Webpack?

지금까지 웹 개발을 백엔드로만 진행하다보니 백엔드와 프론트엔드의 다양한 상호작용적인 체계를 이해하기 위해 개인 공부를 시작하였다.

따라서, 전문적인 프론트엔드 용어는 없지만 내가 공부하며 이해한 바를 정리하였다.

참고로 백엔드 서버는 Node.js로 구성되어져 있다.

Webpack을 프론트엔드에서 사용할 Javascript 즉, 동적인 역할을 담당하는 것들을 Webpack으로 처리해 보고자 시도해 보았다.

Webpack은 위 사진에서 보듯이 왼쪽의 다양한 확장자 명을 가지고 있는 파일들을 프로젝트에서 작성되어질 것이다.

이 작성된 파일들을 다른 파일들(오른쪽에 Static Assets 확장자명)로 처리, 변경시켜주는 역할을 하는 것이 Webpack이다.

하지만 프론트엔드 개발직군에서는 Webpack을 직접적으로 프로젝트에 사용하지는 않는다고 한다.

다만, Webpack이 내장되어져 있는 툴들을 사용한다는 것 정도로 이해를 했다.

내장되어져 있는 툴이라 함은 react.js나 vue.js, svelt.js 혹은 next.js를 쓴다고 하며 대부분의 큰 프레임워크들은 Webpack 설정을 노출시키지 않는다.

이에 Webpack은 프론트엔드에서 주요 툴들의 기반이 된다고 하니 이를 기반으로 개인프로젝트를 구성하였고 Webpack의 설정 방법들을 설명하고자 한다.

Webpack 설치패키지

Webpack과 Webpack CLI 설치

npm i webpack webpack-cli --save-dev

 

Javascript로 사용할 test파일 생성

const hello = async () =>{
	alert("hi! its working")
	const x = await fetch("")
}

hello()

브라우저에서 이 js코드를 실행하기 위해 이 파일을 Webpack에 전달할 것이다.

 

webpack.config.js

// webpack.config.js
const path = require('path');

module.exports = {
   entry: './src/client/js/main.js',
   mode: 'development', // mode를 개발로 설정 
   output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'assets', 'js'),
   },
   module: {
      rules: [
         {
            test: /\.js$/,
            use: {
               loader: 'babel-loader',
               options: {
                  presets: [['@babel/preset-env', { targets: 'defaults' }]],
               },
            },
         },
      ],
   },
};

처리하고 싶은 파일, Javascript test 파일의 경로를 webpack.config.js 파일에 입력해주고 output을 위해서 파일명을 정해 주면서 path까지 지정해줘야한다.

여기서 중요한 것은 path를 지정해 줄 때 절대경로로 지정해주어야 한다는 것이다.

지금 이 프로젝트 같은 경우 Babel-loader를 사용해서 프로젝트에서 사용할 Javascript의 코드의 호환성 부여해 주기 위해 webpack.config.js에 설정한 것이다.

그리고 여기서 rules는 파일의 종류에 따라 어떤 전환을 할 건지 결정하는 것이다.

참고자료:

https://webpack.kr/concepts/

Concepts | 웹팩

 

참고자료:

https://www.npmjs.com/package/babel-loader

babel-loader