webpack 완전 초보들을 위한 기초

개요

현재 사내에서 진행하고 있는 electron-vue 프로젝트는 보일러 플레이트를 가져다가 시작했다.

웹팩에 대한 아무런 정보가 없는 상태로 개발을 시작했고, 종종 마주치는 알 수 없는 오류가 웹팩 설정 때문인거 같은데 고칠 수 없는 경우가 허다했다.

구글 검색등으로 해결해보려고 했지만 초초초초급 개발자인 나의 눈에는 들어오지 않았고.. 

어느날 머리를 식힐 겸 열어본 vue.js 입문 책 끄트머리에 vue.js 고급 개발자 되기 라는 챕터로 webpack에 대한 아주 간단한 설명이 있었고, 정말 간단한 기초인만큼 내 눈에 조금씩 들어왔기 때문에 블로그에 정리하며 공유하고자 한다.

책 이름은 Do it! Vue.js 입문 이다. 

http://www.yes24.com/Product/Goods/58206961

Do it! Vue.js 입문

집필자의 블로그는 아래와 같다. (글쓴이는 이 책과 아무런 관련 없음..)

https://joshua1988.github.io/web-development/vuejs/doit-vuejs-book/#vuejs-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%9E%80

Do it! Vue.js 입문 책을 집필하면서..

 

 

 

소개

프런트엔드 프레임워크 (앵귤러, 리액트, 뷰)를 사용한다면 함께 사용하길 권해지는 모듈 번들러.

웹팩 홈페이지 (https://webpack.js.org/) 메인화면

모듈? 번들러?

웹팩 공식 홈페이지에서는 '서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해 주는 변환 도구" 로 정의한다.

즉, "파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구" 이다.

 

애플리케이션 동작과 관련된 여러 개의 파일(HTML, CSS, Javascript, Image...)들을 1개의 JS파일로 변환한 뒤, 해당 JS 파일만 로딩하면 되도록 하는 도구이다.

 

 

 

사용이유

그렇다면 왜 많은 파일들을 하나의 JS 파일로 바꾸는걸까? 

웹 앱의 로딩 속도를 향상시키기 위해서이다.

웹팩으로 번들되기 전, 여러 개의 파일(HTML, CSS, Javascript, Image...)들을 브라우저에 나타내기 위해서는 파일마다 서버로 보내는 HTTP 요청이 필요하다. 따라서, HTTP 요청 숫자를 줄이기 위해서이다.

이런 문제를 개선하기 위해 예전부터 걸프(Gulp), 그런트(Grunt)화 같은 웹 자동화 도구들이 존재했었다. 웹팩은 이 도구들보다 많은 기능을 제공한다.

 

 

 

웹팩의 주요 속성

속성	설명
entry	웹팩으로 빌드(변환)할 대상 파일을 지정하는 속성. entry로 지정한 파일의 내용에는 전체 애플리케이션 로직과 필요 라이브러리를 로딩하는 로직이 들어간다.
output	웹팩으로 빌드한 결과물의 위치와 파일 이름 등 세부 옵션을 설정하는 속성
loader	웹팩으로 빌드할 때 HTML, CSS, PNG(이미지) 파일 등을 자바스크립트로 변환하기 위해 필요한 설정을 정의하는 속성
plugin	웹팩으로 빌드하고 나온 결과물에 대해 추가 기능을 제공하는 속성. 예를들어, 결과물의 사이즈를 줄이던가 결과물(기본적으로 자바스크립트)을 기타 CSS, HTML 파일로 분리하는 기능 등이 있다.
reslove	웹팩으로 빌드할 떼 파일이 어떻게 해석되는지 정의하는 속성. 예를 들어, 특정 라이브러리를 로딩할 때 버전은 어떤 걸로 하고, 파일 경로는 어디로 지정하는지 등..

 

 

 

웹팩 데브 서버 (webpack-dev-server)

웹팩 설정 파일의 변화를 감지하여 웹팩을 빌드할 수 있도록 지원하는 유틸리티이자, Node.js 서버 

서버 구성은 Node.js 환경 위에 Express 서버 프레임워크가 올라간 형태

 

데브 서버는 웹팩 설정 파일의 내용이 변경되면 브라우저 화면으르 자동으로 새로 고침하고, 바로 다시 웹팩으로 빌드한다.

 

 

사실 웹팩을 빌드하려면,

npm run build

명령어를 사용해야 한다.

이 명령어가 아닌

npm run dev

를 사용했는데도 애플리케이션이 마치 웹팩으로 빌드한것과 같이 동작하게 된다.

 

npm run dev 명령어로 프로젝트를 실행하게 되면 프로젝트 구조에 실제로 /dist/ 폴더는 생성되지 않는다.

존재하지도 않는 폴더의 내용을 참조하는 것이다.

그렇다면, npm run dev 명령어로 띄운 서버에서 참조하고 있는 빌드 결과물은 어디에 있는 것일까?

바로 메모리 상에 있다. 

빌드 파일을 파일 시스템이 아닌 컴퓨터 메모리에만 저장하기 때문에 파일 시스템(폴더) 상에서는 빌드 파일을 확인할 수 없다.

이렇게 하는 이유는 파일 시스템에 파일을 쓰고 읽는 시간보다 메모리에 저장하고 읽는 시간이 더 빠르기 때문이다.

이때문에 웹팩 데브 서버를 인 메모리 (in memory) 기반이라고 한다.

 

 

 

웹팩 설정 파일 분석

참고하고 있는 책은 뷰 CLI로 webpack-simple 프로젝트를 생성하고 나면 생기는 webpack.config.js 파일을 분석하고 있다.

해당 내용을 참고하며, 현재 프로젝트에서 사용하고 있는 보일러플레이트의 config를 분석하려고 한다.

 

entry 속성

entry: {
    main: [
        path.join(__dirname, '../src/main/index.js')
    ]
  },

웹팩으로 빌드할 파일을 해당 파일로 지정한다.

현재 index.js 파일로 지정되어 있고, 이 코드는 아래와 같이 축약할 수 있다.

entry: path.join(__dirname, '../src/main/index.js'),

 

output 속성

output: {
    filename: '[name].js',
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, '../dist/electron')
  }

웹팩으로 빌드를 하고 난 결과물 파일의 위치(path)와 이름(filename)을 지정한다.

책과는 다르게, libraryTarget 이라는 옵션이 하나 더 있는데, 라이브러리를 내보낼 형식에 관련된 것이라고 한다.

(배포되는 플랫폼에 따라서 선언)

var (default)	var Library = ...
this	this[“Library”] = ...
commonjs	exports[“Library”] = ...
commonjs2	module.exports = ...
amd	AMD로 내보내기 (옵션으로 설정 - 라이브러리 옵션을 통해 이름 설정)
umd	universal library target

 

module 속성

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

위와같은 형태의 모듈 속성들이 존재하고, test 파일들을 변환할 모듈이 use에 적혀있다.

 

 - 프로젝트 폴더 안의 scss 파일에 vue-style-loader, css-loader, sass-loader 적용

 - css-loader, sass-loader를 통해 css->js 파일로 변환

 - 변환된 css 속성들이 vue-style-loader를 통해 <style> 태그로 삽입됨

 

resolve 속성

 resolve: {
    alias: {
      '@': path.join(__dirname, '../src/renderer'),
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['.js', '.vue', '.json', '.css', '.node']
  },

웹팩이 알아서 경로, 확장자 처리를 할 수 있도록 도와줌

 

devtool 속성

devtool: '#cheap-module-eval-source-map',

웹팩으로 빌드한 파일로 웹 앱을 구동했을 때, 개발자 도구에서 사용할 디버깅 방식

옵션에 대한 내용은 아래에서 참조

https://webpack.js.org/configuration/devtool/

Devtool | webpack

 

 

 

 

 

끝내며

현재 프로젝트는 직접 구성한 웹팩 환경이 아닌 보일러플레이트 웹팩 개발 환경으로 시작했기 때문에 웹팩 지식이 부족한 상태로 웹팩에 관련된 오류나 수정사항에 대응하기가 어렵다.

예를들어서, 당시에 유용하게 사용하고 있던 hot-loader 기능이 갑자기 동작하지 않았다.

당시에 electron 버전업을 진행했었기 때문에, 막연하게 electron 버전 관련 이슈라고 생각하였고, 2~3일 정도 고쳐보려고 했었지만 잘 되지 않았다. 그러다 어느 날 stack overflow의 답변을 따라 webpack dev server 객체 생성 시 hot: true 를 추가해서 해결한 적이 있었다.

당시에도 정확한 이유는 모르지만, 해당 코드를 집어넣은 뒤 잘 돌아가니 넘어간적이 있었는데 이번에 공부하는 과정에서 webpack dev server와 관련된 기능이란것을 알게되었다.

기본 지식이 없기 때문에 블로그나 공식 사이트 설명을 보며 공부하기가 어려웠는데, 책을 통해서 어느정도 기초를 잡을 수 있었고, 이렇게 천천히 공부해나가다 보면 알수없는 오류들을 해결할 수 있지 않을까. 라고 기대해본다.