3. 설정파일 도입

💡

INPUT → PROCESS → OUTPUT

이 3가지에 거의 모든 개념이 들어가있다는 '생코'의 명언

저 위 순서에 따라 어떻게 다양한 형태의 자원들을 webpack 에게 던져줄 것인가? 또한 어떤 방법으로 가공할 것인가? 를 알아보는 게 중요하고, 또한 어떻게 유리한 형태로 내보낼 것인가? 를 알아보는 게 중요하다.

이 흐름을 컨트롤하기 위해서는 webpack 에게 어떻게 해라 시키는 방법이 있는데 이 방법에 대해서 알아보자.

npx webpack —entry ./src/index.js —output ./public/index_bundle.js

위의 명령어는 webpack 에게 entry 파일과 output을 선언하는 명령어였다. 그러나 프로젝트가 커질수록 이 명령어를 일일이 사용하기 번거롭기 때문에 설정파일을 사용하는 것이 좋다.

https://webpack.js.org

위 webpack 홈페이지에 들어가보면 webpack.config.js 파일에 대한 예제들이 나와있는 것을 볼 수 있다.

이 예제를 참고하면서 코딩하면 쉬울 것이다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
};

다음과 같이 config 파일을 코딩해주고

npx webpack —config webpack.config.js 을 입력해주면 번들링되어 파일화 된다. (참고로 파일을 webpack.config.js 라는 약속된 이름으로 해주었으면 npx webpack 만 입력해주어도 된다.)

즉 정리하자면 번들링하는 방법은

• 명령어를 통해 엔트리 아웃풋 적어 시키기

• webpack.config.js 에 코드 적어주고 npx webpack 입력

---

<> 모드 도입

webpack의 운영모드라는 것을 알아보자.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
};

위 코드가 작성했었던 webpack.config.js 파일이다.

저 형태로 실행하게 되면 경고 문구가 하나 뜨는 것을 볼 수 있다. mode 설정을 하지 않아서 생기는 문구이다. 즉, 개발용인지 서비스 용인지 webpack에게 알려줘야 한다는 것이다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
};

다음과 같이 mode 한 줄 추가해주면 경고 문구가 뜨지 않는 것을 볼 수 있다.

이 모드를 사용해서 개발용 번들과 배포용 번들을 따로둬서 따로 분리시켜 js 파일을 가질 수도 있다.

또는 하나의 webpack.config.js 하나의 파일 내에서 조건문을 설정해 switching 되게 할 수도 있으니 이 점은 따로 찾아서 처리해보자.