npm install @webpack-cli/generators --save-dev
- 웹펙만을 설치하는 방법도 있지만, 위의 명령어를 사용해서 웹팩을 설치하면 웹팩에서 잘 쓰이는 플러그인을 함께 설치하는 방법을 제공한다.
npx webpack-cli init
- 웹펙의 초기 설정을 하면서 기본 플러그인을 자동으로 설치해 보자.
- 위 명령어로 웹팩을 설치할 때 몇 가지 웹팩에서 사용되는 유명한 플러그인 또는 설정을 사용할지를 묻는다.
? Which of the following JS solutions do you want to use? ES6
- none, ES6, typescript 중에서 무엇을 사용할지를 묻는다. ES6 문법은 대부분의 브라우저에서 지원을 하고, ES6를 지원하지 않는 익스플로러 브라우저가 있지만 익스플로러가 종말을 맞은 시기에 ES6 이전의 자바스크립트를 사용할 필요는 없기 때문에 ES6를 선택하면 된다. 타입스크립트의 기본 설정을 하고 싶은 경우에는 타입스크립트를 선택하면 된다.
? Do you want to use webpack-dev-server? Yes
- 웹팩 개발 환경을 서버로 만들어 실행한다는 의미이다. 리액트와 비슷하게 로컬에서 서버로 개발을 할 수 있다. 자바스크립트 변경과 동시에 브라우저에 반영이 되는 핫 모듈 리로딩과 같은 기술을 사용할 수 있다.
? Do you want to simplify the creation of HTML files for your bundle? Yes
- HTMLWebpackPlugin라는 웹팩 플러그인을 사용하여 HTML 파일도 함께 번들링하는 기능을 제공한다.
- 웹팩을 사용할 때 JS, CSS, IMG 파일등이 해시화 되는 옵션을 사용할 때가 있는데 HTML 파일이 번들링 되면 해시화 파일명을 연결하는 링크를 자동 생성한 HTML 파일을 만들어 준다.
- 일반적으로는 HTML 파일도 함께 번들링하는 방식으로 사용하므로 yes를 체크한다.
? Do you want to add PWA support? No
- 기본적으로 브라우저는 HTML을 서버에서 받아 온 후, HTML 안에 있는 CSS와 JS 파일을 서버에서 받아와서 웹 페이지를 실행한다.
- PWA 기능은 HTML과 CSS, JS 등의 파일을 미리 다운 받아 놓고 다음 실행에는 서버에서 CSS와 JS를 받아오지 않는 방식을 활용하여, 초기 로딩에 페이지를 실행하기 위해 파일을 다운로드하지 않고 바로 실행할 수 있기 때문에 속도가 빠르며, 서버 접속 없이도 웹 페이지를 실행하도록 한다. 물론 서버에서 전달될 때마다 변화되는 데이터는 별도로 받아야 하기 때문에 데이터를 받지 않는 방식으로 만든 사이트가 아니라면 페이지의 HTML, CSS, JS가 미리 로컬에 다운로드 된 파일이 실행이 되더라도 서버 데이터 의존성으로 인해 화면이 제대로 실행되지 않을 수 있다.
- 예를 들어 유튜브나 유튜브 뮤직을 사용하면 브라우저에서 실행하지 않고 어떤 파일 아이콘으로 웹을 실행하는 기능을 제공한다. 주소창의 주소 변경이나 탭열기 브라우저의 각종 메뉴에 접근할 수 있는 기능이 차단된 브라우저를 실행하는데 이것이 PWA 기술을 활용하여 만들어진다.
- 일반적인 웹 사이트를 만들 때는 사용하지 않는 기능이기 때문에 No으로 세팅을 한다.
? Which of the following CSS solutions do you want to use? SASS
- CSS와 관련된 기술 중에서 무엇을 사용할지를 선택한다.
- 옵션으로는 none, CSS only, SASS, LESS, Stylus가 있다. none은 CSS 관련 세팅을 자동으로 하지 않는 것이고, CSS only는 CSS 파일만을 사용할 수 있도록 한다. SASS와 LESS, Stylus가는 CSS에 좀 더 편리한 문법을 입히는 기술인데, 보통은 SASS를 많이 사용한다.
? Will you be using PostCSS in your project? No
- PostCSS는 자바스크립트를 이용하여 css 문법을 커스터마이징하는 기능을 제공한다.
- PostCSS를 설치하고 이 위에 동작하는 자바스크립트 플러그인을 사용하면 정의한 CSS 문법이 다른 결과로 변환되어 나온다.
- 예를 들어 어떤 브라우저에서 A라는 CSS 문법이 적용되지 않고 B라는 문법을 써야 적용되는 문제가 있다면 PostCSS를 사용해 A라는 문법만 사용하고 A문법을 사용했을 때 B문법도 추가해 주는 기능을 정의한다면 B 문법을 따로 쓰지 않고서도 A 문법만으로 해당 브라우저에서만 다르게 동작하는 처리를 할 수 있다.
- 브라우저에서는 저마다 태그에 대해 기본 스타일을 제공하고 있는데 기본 태그를 사용할 때 크롬의 디자인과 사파리의 디자인이 다르게 적용될 수 있다. 이런 경우 자동으로 브라우저가 제공하는 기본 스타일을 자동으로 무시하고 통일된 스타일을 적용할 수 있게 만들어 주는 방식으로 활용할 수 있을 것이다.
- 보통 CSS 문법은 커스터마이징하지 않고 있는 그대로를 사용하거나 CSS 전처리기인 SASS, LESS, Stylus가 제공하는 문법을 사용하기 때문에 PostCSS는 특별한 경우가 아니면 쓰지 않는다. 따라서 no로 답하면 된다.
? Do you want to extract CSS for every file? Yes
- MiniCssExtractPlugin과 관련된 옵션 설정을 한다. 이 옵션을 설정하지 않으면 css 파일도 자바스크립트 파일로 결과물이 산출된다.
- CSS 파일과 자바스크립트 파일을 분리해서 번들링을 하고 싶은 경우에는 이 옵션을 yes로 선택하면 된다.
- 자바스크립트 파일은 화면의 동적인 이벤트를 다루는 것에 반해, CSS 파일은 화면에 옷을 입혀주는 기능을 한다. CSS를 로딩할 때는 브라우저 화면에 표시되는
body태그가 로드되기 이전인head태그에 추가한다. 그러면 CSS 코드를 브라우저가 읽고 CSS 선택자에 해당하는 태그가 있을 경우 스타일을 바로 적용할 수 있도록 준비한다. 브라우저는 모든 태그를 읽고 화면에 한 번에 표시하는 것이 아니라,body태그의 태그를 읽으면서 한 단위의 태그가 해석되면 화면에 표시한다. 따라서 화면에 표시회는 태그에 CSS는head태그에서 미리 준비했기 때문에 바로 바로 적용이 되게 된다. 그에 반해 자바스크립트의 경우 모든body태그가 로드된 이후에 동작하도록 만들어야 하는 경우가 많다. CSS는 화면에 표시되기 이전에 미리 화면에 입혀줄 옷을 준비하기 때문에body의 태그가 화면에 표시되자마자 CSS가 입혀진다. 하지만 자바스크립트와 함께 만들어진 태그의 경우, 자바스크립트는 body 태그가 로드 된 이후에 동작하게 하기 위해서html문서의 태그가 다 파싱이 되고나서 동작이 되도록 한다. 이를 위해script태그는body태그의 마지막에 위치하거나head태그에 위치시킬 때는 문서가 다 로딩된 이후 실행하라는defer라는 특별한 옵션을 붙여준다. 이렇게 약간 늦게 실행되는 자바스크립트에 CSS가 있는 경우 초기에 스타일을 준비하지 않으므로 브라우저에 태그가 표시되는 즉시 CSS가 적용되지 않고 body 태그가 로드된 이후에 CSS를 입히므로 페이지를 로딩한 이후 바로 CSS가 적용되지 않고 태그가 다 로딩이 될 때까지 약간의 시간이 필요하다. 이런 문제점을 방지하기 위해서 자바스크립트에서 CSS를 분리하여 화면에 태그가 표시되기 전에 CSS가 미리 준비되도록 하기 위해서 CSS를 별도로 분리하는 위 옵션을yes로 한다.
? Do you like to install prettier to format generated configuration? Yes
- 파일의 저장 버튼을 누를 때 prettier라는 포메터에 의해서
webpack.config.js설정 파일의 코드가 정렬되게 할 것인지를 묻는다. - 보통 prettier는 IDE에 설치해서 IDE에서 파일을 저장할 때마다 코드 포멧을 정렬해 주는 기능이지만 이렇게 사용하지 않고 위의 방식의 prettier 사용은 설정 파일
webpack.config.js의 정렬을 할 것인지 하지 않을 것인지를 묻는 것이다. 따라서 그냥 yes를 입력해 주면 된다.
? Pick a package manager: yarn
- 위 옵션을 선택하면 npm, yarn, pnpm 중에 하나를 선택하라는 메시지가 나온다.
- 아무거나 선택하면 되지만 속도가 빠른 yarn 또는 가장 많은 사용량을 보이는 npm을 선택하도록 하자. package manager를 다룰 때 마주하는 문제들을 어떻게든 해결할 자신이 있다면 속도가 빠른 pnpm을 사용해도 된다.