이 3가지에 거의 모든 개념이 들어가있다는 '생코'의 명언
저 위 순서에 따라 어떻게 다양한 형태의 자원들을 webpack 에게 던져줄 것인가? 또한 어떤 방법으로 가공할 것인가? 를 알아보는 게 중요하고, 또한 어떻게 유리한 형태로 내보낼 것인가? 를 알아보는 게 중요하다.
이 흐름을 컨트롤하기 위해서는 webpack 에게 어떻게 해라 시키는 방법이 있는데 이 방법에 대해서 알아보자.
npx webpack —entry ./src/index.js —output ./public/index_bundle.js
위의 명령어는 webpack 에게 entry 파일과 output을 선언하는 명령어였다. 그러나 프로젝트가 커질수록 이 명령어를 일일이 사용하기 번거롭기 때문에 설정파일을 사용하는 것이 좋다.
위 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 되게 할 수도 있으니 이 점은 따로 찾아서 처리해보자.
'책장 > Webpack' 카테고리의 다른 글
| 5. 플러그인 (0) | 2020.09.27 |
|---|---|
| 6. Webpack 참고사항 (0) | 2020.09.27 |
| 2. Webpack 도입 (0) | 2020.09.27 |
| 1. Webpack 소개 (0) | 2020.09.27 |
