기존에 ECMA6기반으로 코드를 작성, 프로젝트를 압축 (concat) 하고 난독화 (uglify) 등을 진행할때 gulp를 사용했었습니다.
클래스의 확장, 라이브러리간 의존성이 생겨 task를 나누어서 관리했었는데
다른 클래스를 참조할때 전역객체를 통해 클래스를 참조하다 보니 window.console에 노출되는등 좋지 않은점이 많이 발견되었습니다.
프로젝트가 커질수록 이렇게 관리하는건 시간이 오래 걸린다 판단되어 Webpack으로 전환했습니다.
하지만 인터넷등을 보니 WebPack 개념 자체에 대해서는 설명이 잘 되어있지만
import.. export를 실질적으로 어떻게 하는지 보여주는 부분은 없어서 난감했었는데 해당 부분에 대해 정리해 놨습니다.
webpack의 개념과 모듈, import, export에 관한 개념은 다른 글에 많이 나와있기 때문에
여기서는 실질적인 구성, 실행을 하는것이 목적입니다.
- 목표 -
1. main 진입점에서 다른 js파일을 import한뒤 import한 클래스의 함수를 이용해서 로그를 찍어보자.
2. js파일을 한개로 압축한뒤 minify 시킨다.
현재 사용하는 개발도구는 IntelliJ 입니다. Webstorm은 같은 Jetbrain에서 만든 도구라 크게 다른점은 없을거라 판단되며
기타 도구들도 Node.js 와 npm이 있다면 충분히 가능할것으로 판단됩니다.
[1] terminal 에서 webpack을 global로 설치한다.
정상적으로 설치가 완료되면 위 화면과 같이 나옵니다. (현재 사진은 재설치한 상태)
설치가 되지 않는다면 Node.js설치가 제대로 되었는지 확인해 본다.
[2] terminal 에서 webpack-cli를 global로 설치한다.
의존성과 관련된 문제는 스스로 설치해서 해결해야 된다고 나와있지만
현재 프로젝트 자체가 깨끗하게 비어있기 때문에 문제되는 부분은 없습니다.
[3]webpack.config.js 파일을 생성
-> webpack을 통해 빌드할때 환경설정을 하는 스크립트라고 생각하면 된다.
module.exports = {
mode: 'development',
context: __dirname + '/app', // 모듈 파일 폴더
entry: { // 엔트리 파일 목록
app: './main.js'
},
output: {
path: __dirname + '/dist', // 번들 파일 폴더
filename: '[name].bundle.js' // 번들 파일 이름 규칙
}
}환경설정과 관련되서 현재 프로젝트의 디렉토리에 관한 설명
현재 프로젝트는 app폴더, dist폴더로 나뉘어져 있다.
app폴더는 기존처럼 우리가 작성한 스크립트들이 들어있는 폴더이고
dist폴더는 webpack을 통해서 하나로 합쳐진 파일이 저장되는 폴더이다.
스크립트를 저장하는 폴더명 (모듈 파일 폴더 이름)을 바꾸고 싶다면 webpack.config.js에서
'/app' 부분을 변경하면 된다 (작성한 코드를 저장하는 폴더)
하나로 합쳐져서 나오는 폴더명 (번들 파일 폴더 이름)을 바꾸고 싶다면
'/dist' 부분을 변경하면 된다 (합쳐진 코드를 저장하는 폴더)
app 폴더 안에 진입점이 될 main.js 와 모듈이 될 Utils.js를 생성합니다.
main.js
"use strict";
import Utils from './Utils'
Utils.log(' Hello Webpack ');
console.log(" Yes !");
Utils.js
"use strict";
export default class Utils{
static log(msg){ console.log('[LOG]' + msg ); }
}
진입점 에서는 Utils 클래스의 static함수를 이용해서 로그를 찍을 예정입니다.
이제 터미널에 webpack 커맨드를 사용해서 빌드합니다.
빌드가 정상적으로 완료되면 이렇게 뜹니다.
dist폴더에 빌드된 파일 (app.bundle.js) 을 확인해보면
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./main.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./Utils.js":
/*!******************!*\
!*** ./Utils.js ***!
\******************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return Utils; });\n\r\n\r\nclass Utils{\r\n static log(msg){ console.log('[LOG]' + msg ); }\r\n}\n\n//# sourceURL=webpack:///./Utils.js?");
/***/ }),
/***/ "./main.js":
/*!*****************!*\
!*** ./main.js ***!
\*****************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils */ \"./Utils.js\");\n\r\n\r\n\r\n_Utils__WEBPACK_IMPORTED_MODULE_0__[\"default\"].log(' Hello Webpack ');\r\n\r\nconsole.log(\" Yes !\");\n\n//# sourceURL=webpack:///./main.js?");
/***/ })
/******/ });다음과 같이 합쳐진 코드를 확인할 수 있습니다.
추후에 config에서 development 로 되어있는 옵션을 Production 으로 변경한뒤
concat, babel, minify 옵션을 적용하면 코드를 한줄로 압축, 난독화해서 처리할 수 있습니다.
이제 index.html 파일을 다음과 같이 수정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/app.bundle.js"></script>
</body>
</html>
빌드된 파일 1개만 로드하게 하면 됩니다.
그후 index.html 파일을 우클릭 한뒤 Run, 또는 Debug로 실행하면
다음과 같이 Utils.js의 함수를 이용해서 정상적으로 Log가 생성되는걸 확인할 수 있습니다.
1. webpack설정에서 진입점만 정의한뒤
2. 다른 파일에 있는 클래스를 호출할때는 import를 통해서 호출하면
3. Webpack이 빌드할때 의존성 관련된 부분을 알아서 처리한뒤
4. 한개의 파일로 합쳐준다.
5. index.html 에서는 합쳐준 파일 1개만 로드하면 된다.
이렇게 요약할수 있습니다.