🔧Webpack : Entry

지난 포스팅에서는 모듈이 모든 브라우저에서 적용되는 것이 아니라 했다. 그래서 이를 해결 하기 위해서 웹팩이 존재한다는 것에 대해서 다루어 보았다.

---

Webpack

웹팩은 모듈로 연결(의존)된 모든 파이들을 하나로 합쳐주는 역할을 한다. 그렇게 합쳐진 파일을 번들이라고 한다. 웹팩이 번들을 만드는 번들러 역할을 한다. 따라서 웹팩을 번들러라고도 한다. 따라서 웹팩을 설치하는 lic를 설치할 것이다.

:: CMD

::npm
npm install webpack webpack-cli --dev
npm install -D webpack webpack-cli

::yarn
yarn add webpack webpack-cli --dev
yarn add -D webpack webpack-cli

설치가 완료가 되면 package.json에 devDependencies가 삽입된걸 알 수 있다. 개발용 패키지는 devDependencies에 적용이 되고 그렇지 않으면 dependencies에 적용이 되는 것을 알 수 있다.

---

Entry

웹팩이 시작하는 부분은 Entry라고 한다. 결과를 저장하는 것을 output이라고 한다. 이제 webpack 결과를 저장하는 경로를 설치 해야한다.

:: CMD

::npx
"node_modules/.bin/webpack" --help       :: 지정 위치를 통한 특정 명령어 사용
"node_modules/.bin/webpack" --mode development --entry ./src/app.js --output dist/main.js
npx webpack --mode development --entry ./src/app.js --output dist/main.js

::yarn
yarn webpack --mode development --entry ./src/app.js --output dist/main.js

* 주의 사항으론 맥과 달리 윈도우에선 지정 위치의 특정 명령어(--help, --output, etc)를 사용할 시에는 따옴표("")를 감싸줘야 해당 위치를 인식 하며 특정 명령어를 사용 할 수 있다는 점을 주의 해야한다.

* 참고로 webpack 5의 경우 --output 옵션은 명령줄에 직접 사용할 수 없다. webpack-config.js 파일 내에 output 경로를 설정해야한다. 본인은 webpack 4로 다운그레이드 했다.

* 추가적으로  npm은 node_modules에 직접 접근할 수가 없다 따라서 npx를 사용해서 접근을 해야한다.

* 위의 방법은 명령어로 실행하는 방법이지만 직접 config 파일을 작성하는 것을 권장한다.

/* package.json */

//수정 전
"dependencies": {
  "webpack": "^5.0.0",
  "webpack-cli": "^4.0.0"
}

//수정 후
"devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }

잘 설치가 되고나면 dist폴더가 생성된 걸 확인 할 수 있다. 이후에 html로 dist폴더의 main.js를 연결해서 실행을 해보면 정상 작동하는 것을 알 수 있다. 

---

webpack.config.js

webpack.config를 설정 해볼 것이다.

/* webpack.config.js */

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/app.js',
  },
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js'
  }
}

• path  : path 모듈은 Node.js의 기본 모듈 중 하나로, 파일 시스템 경로를 쉽게 조작할 수 있게 해 준다. 이 구성에서는 출력 파일의 경로를 설정하는 데 사용된다.
• module.exports : Node.js에서 모듈을 내보낼 때 사용하는 구문이다. ES6에서 제공되는 모듈이 시스템이 아니라는 점 유념 하자. 이 객체를 통해 웹팩의 여러 설정을 정의한다.
• mode : 웹팩의 빌드 모드를 설정한다. 'development' 모드는 개발 중에 유용한 도구와 설정을 활성화하여 개발자에게 도움을 준다. 예를 들어, 더 빠른 빌드 시간과 더 상세한 에러 메시지를 제공한다. 다른 모드로는 'production'이 있는데, 이는 최적화되고 압축된 자산을 생성한다.
• entry : 웹팩이 빌드를 시작할 진입점을 정의한다. 이 예제에서는 main이라는 이름의 진입점이 './src/app.js'로 설정되어 있다. 이는 웹팩이 이 파일을 빌드의 시작점으로 사용하며 이 파일에서 참조하는 모든 모듈과 라이브러리를 번들링한다.
• output : 빌드된 파일들이 어디에, 어떤 이름으로 저장될지를 정의한다.
  • path : path.resolve('./dist')를 사용해 출력 디렉토리의 절대 경로를 지정한다. ./dist는 현재 작업 디렉토리 아래의 dist 폴더를 의미하며 path.resolve는 상대 경로를 절대 경로로 변환한다.
  • filename : '[name].js'는 진입점의 이름을 기반으로 파일 이름을 동적으로 생성한다. entry에서 진입점의 이름을 main으로 설정했으므로 출력 파일의 이름은 main.js가 된다.

 

이제 설정 된 webpack.config를 번들링 되는 과정을 npm scripts에 작성을 해볼 것이다. 아래와 같이 수정 하면 된다.

/* package.json */

"build": "webpack",

이후에 build를 실행하면 잘 동작하는 것을 알 수 있다. build 명령을 하게 되면 webpack.config.js를 참조해서 빌드한다.

::CMD

::npm
npm run build

::yarn
yarn run build

* 참고로  이 코드는 개발 환경에서 간단한 웹팩 설정을 구현한 것으로 소스 파일 ./src/app.js를 시작으로 의존성을 해석하고 그 결과를 ./dist/main.js로 출력한다. 이 설정은 리액트, 뷰, 앵귤러 등의 프론트엔드 프레임워크,라이브러리를 사용하는 프로젝트의 초기 단계에서 자주 사용된다. 리액트(뷰, 등)의 경우 사용자가 직접 웹팩 설정을 수정할 필요는 없도록 설계되어 있다.  웹팩을 비롯해 바벨과 같은 도구들이 이미 설정 되어 있다.

---

REF

• https://pozafly.github.io/javascript/javascript-mvc/