webpack 공부하기 -3

웹팩 config 만들기

npx webpack --entry ./source/index.js --output-filename index_bundle.js -o ./public

이 명령어는 웹 팩을 실행하는 명령어 입니다.

웹 팩을 실행하려면 항상 이코드를 외우거나 다른곳에 저장한 뒤 필요할 때 찾아서 사용해야하는 번거러움이 생긴다.

또한 운영하는 프로젝트가 커질 수 록 명령으로 하는게 대단히 어려워 진다.

그래서 웹 팩에게 좀 더 체계적이고 또 보기 좋게 또 재사용하기 좋게 시키기 위한 방법으로 컨피그레이션 파일을 만드는 방법입니다.

 

생성하기 

webpack.config.js 파일을 생성한다. (자세한 정보는 webpack 공식 홈페이지로 들어가서, Guides → Getting Started 를 참고)

const path = require('path'); //node.js에서 파일의 경로를 쉽게 핸들링 할 수 있게 도와주는 부품

module.exports = {
  entry: './source/index.js', // 입구에 해당하는 파일 입력
  output: {
    path: path.resolve(__dirname, 'public'), 
		//__dirname : 현재 webpack.config.js 파일이 위치하고 있는 경로를 알려주는 변수  
		// public 이라는 하위 경로에 최종적인 결과물을 갖다 놓으라는 뜻
    filename: 'index_bundle.js ',//생성될 파일의 이름 
  },
};

entry : 입구에 해당하는 파일 입력

__dirname : 현재 webpack.config.js 파일이 위치하고 있는 경로를 알려주는 변수

path.resolve 의 2번째 인자 : public 이라는 하위 경로에 최종적인 결과물을 갖다 놓으라는 뜻

filename: 생성될 파일의 이름

 

생성후에, 터미널에 npx webpack --config webpack.config.js 입력해주면 public에 내가 설정한 index_bundle.js 가 생기게 된다.

그러면 다음과 같이 정상작동하는 것을 확인할 수 있다.

만약에 파일이름을 webpack.config.js 라는 약속된 이름으로 생성했을 경우,

npx webpack 만 입력해도 정상작동한다 .

 

참고

https://www.youtube.com/watch?v=cp_MeXO2fLg&list=PLuHgQVnccGMChcT9IKopFDoAIoTA-03DA