Home

오늘의 기억

[Webpack] 사내 webpack 도입기 (3) - Spring 프로젝트에서의 webpack 구성


보통 Spring 과 Webpack 을 혼용해서 개발하는 경우에는 Spring 으로 API 서버를 구축하고, Apache 나 NginX 같은 웹 서버로 Front를 구성하는게 일반적이다.

그러나 상황상 WAS를 웹 서버로 대체하는 경우도 있으며, 게다가 Spring 으로 만든 Legacy Java 프로젝트에서는 JSP를 사용하기 때문에 대부분 WAS로 모든 것을 처리한다.

나 역시도 그랬다. 별도 웹 서버를 사용할 수 없었으며, 사용할 수 있는 리소스는 WAS 하나 뿐이였다.

이제부터 설명하는 것은 이처럼 별도 웹 서버를 사용하지 않고, 하나의 WAS 만으로 webpack 개발 환경을 구축하는 방법이다. 해당 WAS 는 Spring 으로 만들어진 프로젝트이며, JSP를 이용해 Front를 구성하는 구조로 되어있다.


1. 환경 구축

1-1. Spring Framework 프로젝트

우선 Spring Framework 로 생성한 웹 프로젝트가 필요하다.

예제에서는 Java8, Spring Framework 4, Tomcat9 을 사용해서 프로젝트를 구성하였다. (더 오래 된 Legacy Spring Project도 상관없다.)

Spring Framework 기본 구조

1-2. npm

다음으로 npm 을 사용할 수 있는 환경이 필요하다.

npm 은 Node.js 프로그램을 설치하면 사용할 수 있다.

Node.js 설치는 Node.js 공식 홈페이지에서 할 수 있다.

Node.js

1-3. webpack

npm 을 설치하면 CMD 창에 npm 이라는 명령어를 사용할 수 있다.

npm 명령어를 이용해 webpack 을 Global 설치하면 기본적인 환경 구축은 끝난다.

$ npm install webpack webpack-cli --global

설치시 별도로 버전을 명시하지 않는이상, 가장 최신버전으로 설치가 된다.

현재(2018.08.08) 기준으로 최신 버전은 webpack@4.17.0, webpack-cli@3.1.0 버전이다.


2. Spring 프로젝트에 webpack 적용

Spring 프로젝트는 개발 후 배포시 보통 war 파일로 배포된다.

그리고 webpack 을 이용해서 Front-End 개발을 하면 모듈 파일과, 번들 파일 두 종류의 파일이 생성된다.

모듈 파일은 개발시에만 필요하다. 어차피 번들링하면 번들 파일에 모듈이 모두 포함되기 때문이다. 따라서 배포시 모듈 파일을 괜히 war 파일에 포함시켜 war 파일의 용량을 키울 필요도 없다.

2-1. npm 프로젝트 설정

npm 프로젝트로 설정하려면 어떤 디렉토리가 npm 프로젝트의 root 디렉토리로 설정할지 정해야한다.

Spring 프로젝트에서는 src/main 을 root 디렉토리로 설정하면된다.

root 디렉토리를 정했으면 npm 의 init 명령어를 이용해 package.json 파일을 생성한다.

# src/main
$ npm init -y

2-2. 모듈 파일 디렉토리 생성

Webpack 을 이용한 Front-End 개발시에는 모듈들을 모아두는 디렉토리가 필요하다. 이런 모듈 파일은 빌드시 포함할 필요가 없다.

따라서 빌드시 포함되지 않아도 될 위치에 디렉토리를 생성하면된다.

가장 적절한 위치는 앞서 설정한 npm root 디렉토리인 src/main 에 생성하는 것이다.

디렉토리 이름은 front 로 지정하겠다.

2-3. webpack 설정

앞서 global로 설치한 webpack을 project level 에서 한번 더 설치가 필요하다.

추가로 --save 옵션을 주어 package.json 파일에 자동으로 dependency 를 추가해준다.

# src/main
$ npm install webpack webpack-cli --save

그리고 webpack.config.js 파일을 다음과 같이 생성한다.

const path = require('path');

module.exports = {
  context: path.resolve(__dirname, 'front'),
  entry: {
    home: './home.js',
  },
  output: {
    path: path.resolve(__dirname, 'webapp/resources'),
    filename: '[name].js',
    publicPath: '/example/resources',
  }
};

여기서 중요한 설정은 context 와, path, publicPath 이다.

contxt 설정은 앞서 생성한 모듈 파일의 디렉토리로 설정하며,

path 설정은 엔트리 파일 (번들 파일) 이 저장 될 위치를 설정한다. 이 디렉토리는 빌드시 포함되는 디렉토리이며, WAS를 통해 접근이 가능해야한다.

publicPath 설정은 각종 리소스를 URL로 통해 접근시 URL 앞에 붙는 공통 경로이다. 따라서 WAS의 root context 와 리소스가 저장되는 디렉토리를 합쳐서 설정한다.

다른 설정에 대한 내용은 여기서 확인할 수 있다.

2-4. Spring Context 설정

엔트리 파일 (번들 파일) 이 저장되는 디렉토리는 WAS를 통해 접근이 가능해야한다. 따라서 Spring Context 파일에 다음과 같이 설정한다.

<resources mapping="/resources/**" location="/resources/" />

Eclipse를 이용해서 Spring 프로젝트를 생성하면 기본으로 설정이 되기도 하지만 디렉토리를 변경하거나, 설정이 안들어갈 수도 있으므로 다시 한 번 확인한다.

2-5. package.json 설정

package.json 파일에 다음과 같이 scripts 항목을 추가한다.

"scripts": {
  "develop": "webpack -w --mode development --devtool inline-source-map",
  "build": "webpack --mode production"
}

해당 스크립트들은 npm run 스크립트명 으로 실행이 가능하다.

develop 스크립트는 webpack을 개발 모드로 실행하며, inline-source-map 개발툴을 사용한다. 또한 w(watch) 옵션을 주어서 모듈 파일이 변경시 바로바로 번들링 되게끔 한다.

build 스크립트는 webpack을 배포 모드로 실행한다. 배포 모드로 실행시 난독화 및 압축이 자동으로 설정되며 엔트리 파일의 용량을 줄어준다.

3. 개발

이제 Front-End 개발을 하면된다.

front 디렉토리에 모듈 파일들을 만들어서 개발하고, webpack.config.js 파일에 엔트리를 추가하며, JSP 파일에는 번들링 된 엔트리 파일을 <script> 태그로 불러오면 된다.

개발시에는 npm run develop 스크립트를, 배포시에는 npm run build 스크립트를 사용하면 된다.

최종 프로젝트 구조

소스 코드

예제에 사용 된 소스코드는 ryum91/spring-webpack 에서 받을 수 있다.


같이 보기

20180808 Charyum.Park