[webpack] 환경 설정 및 설명

쏘소·2022년 2월 26일

Webpack

목록 보기

2/4

개발 환경 기본 구성

빈 폴더에서 터미널을 열고 아래 명령어로 package.json 파일을 생성

npm init -y

아래 명령어로 해당 폴더에 웹팩 관련 라이브러리와 lodash 라이브러리 설치

npm i webpack webpack-cli css-loader style-loader 
npm i lodash

폴더에 index.html 파일을 생성하고 아래 내용 추가

<!-- index.html -->
<html>
  <head>
    <title>Webpack Demo</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- <script src="src/index.js"></script> -->
    <script src="dist/main.js"></script>
  </body>
</html>

프로젝트 루트 레벨에 src 폴더를 생성하고 그 안에 index.js 파일 생성.

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');//'Hello webpack'을 넣는 것

  return element;
}

document.body.appendChild(component());

프로젝트 폴더 루트 레벨에 webpack.config.js 파일 생성 후 아래 내용 추가

// webpack.config.js
// `webpack` command will pick up this config setup by default
var path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

웹팩 빌드 명령어를 실행하기 위해 package.json 파일에 아래 내용 추가

"scripts": {
  "build": "webpack"
}

npm run build 명령어를 실행하여 빌드가 잘 되는지 확인

웹팩의 4가지 주요 속성

웹팩의 빌드(파일 변환) 과정에는 아래 4가지 주요 속성이 포함된다.

entry
output
loader
plugin

위 4가지 주요 속성 중 오늘은 우선적으로 entry와 output에 대해 알아보기로 하자.

entry

entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로이다.

// webpack.config.js
module.exports = {
  entry: './src/index.js'
}

위 코드는 웹팩을 실행했을 때 src 폴더 밑의 index.js 을 대상으로 웹팩이 빌드를 수행하는 코드이다.

entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨져 있어야 한다.

Entry 유형

앞에서 살펴본 것처럼 엔트리 포인트는 1개가 될 수도 있지만 아래와 같이 여러 개가 될 수도 있다.

entry: {
login: './src/LoginView.js',
main: './src/MainView.js'
}
위와 같이 엔트리 포인트를 분리하는 경우는 싱글 페이지 애플리케이션이 아닌 특정 페이지로 진입했을 때 서버에서 해당 정보를 내려주는 형태의 멀티 페이지 애플리케이션에 적합하다.

output

output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다.

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

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
}

여기서 filename 속성은 웹팩으로 빌드한 파일의 이름을 의미하고, path 속성은 해당 파일의 경로를 의미한다. 그리고 path 속성에서 사용된 path.resolve() 코드는 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API이다. 파일에 대한 유효한 경로를 잡아주기 위해서 output 에 그냥 문자열이 아닌 방식으로 작성한다.

실제로 빌드 결과 path 는 다음과 같다.

output: './dist/bundle.js'

Output 파일 이름 옵션

생성된 결과 파일의 이름에는 각각 엔트리 이름, 모듈 아이디, 해시 값 등이 포함될 수 있다.

쏘소

개발하면서 행복하기

이전 포스트