학습 배경
- 우아한테크코스 두번째 미션 로또에서 웹팩을 사용하게 되었다.
- 이전에 웹팩을 사용한 적은 있지만, 늘 정확히 웹팩에 대해 알지 못하고 기계적으로 사용하기 바빴다. 그래서인지 예상치 못한 빌드 에러가 나왔을 때 문제점을 해석하지 못하는 모습을 발견해서 학습하기로 했다.
웹팩이 무슨일을 하는가
- 웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러이다.
- 웹팩은 복잡한 의존성 관계를 갖는 여러개의 파일들을 번들링하여 적은 정적 파일을 만든다.
- 웹팩은 모든 모듈을 매핑하고, 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다.
더 알아보기 - 디펜던시 그래프란?
- 하나의 파일이 다른 파일에 의존할 때 마다, 웹팩은 이를
의존성으로 취급한다.- 웹팩이 애플리케이션을 처리 할 때, 엔트리 포인트에서 시작하여 애플리케이션에서 필요한 모든 모듈을 포함하는 디펜던시 그래프를 재귀적으로 빌드 한 뒤, 모든 모듈을 브라우저에 의해 로드되는 번들로 묶는다.
왜 번들러가 필요한가?
- 번들러를 통해 여러개의 파일을 적은양의 정적 파일로 만들면, 브라우저가 새 요청을 시작하는 동안 앱이 기다려야 하는 횟수를 최소화 하기 때문이다.
웹팩 번들링 옵션들을 하나씩 살펴보기
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/index.js",
resolve: {
extensions: [".js", ".css"],
},
devServer: {
port: 9000,
},
devtool: "source-map",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
};
0. Mode
development,production,none으로 설정 할 수 있다.- 모드 설정에 따라 내장돈 환경별 최적화를 활성화 할 수 있다.
- 기본 설정값은 production이다.
- 직접 설정하는 방법과, CLI의 인수로 직접 전달 하는 방법 (
webpack --mode=development) 이 있다. - development
- DefinePlugin의 process.env.NODE_ENV를 development로 설정한다. - production
- DefinePlugin의 process.env.NODE_ENV를 production으로 설정한다.
1. Entry
entry: "./src/index.js",- 엔트리 포인트(=시작점)를 가리킨다.
- 웹팩이 내부 디펜던시 그래프를 생성하기 위해 사용해야하는 모듈이다.
- 즉, 엔트리 포인트부터 시작하여 의존적인 모듈을 모두 찾아내처 하나의 결과물을 도출한다.
- webpack.config.js 옵션에는 엔트리 파일의 경로를 작성한다.
- 더 많은 설정 옵션 보러가기
2. Output
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},- 엔트리 포인트부터 시작하여 만든 결과물이다.
- 위와 같이 filename과 path를 설정하여 저장되는 폴더 (dist)와 파일 저장명 (bundle.js)을 설정할 수 있다.
- 더 많은 설정 옵션 보러가기
3. Loaders
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},- 위와 같이 설정 파일의 module 객체 내부 rules 프로퍼티에 정의해준다.
- 웹팩은 기본적으로 자바스크립트와 JSON 파일만 이해한다. 따라서 로더를 사용하여 웹팩이 다른 유형의 파일(CSS,SCSS,이미지 등..)을 처리하거나, 유효한 모듈로 변환하여 애플리케이션에서 사용 또는 디펜던시 그래프에 추가한다.
- 웹팩에서 CSS를 import하여 번들링하기 위해서는
style-loader와css-loader를 필수적으로 사용해야 한다. - 로더는 웹팩 설정에 두가지 속성(test, use)을 가진다.
- test : 변환이 필요한 파일 식별
- use : 변환을 수행하는대 사용되는 로더 정의
- 위에 정의된 로더 설정은 아래와 같이 해석된다.
웹팩! require()/ import 문 내에서 '.css' 파일로 확인되는 경로를 발견하면 번들에 추가하기 전에 style-loader와 css-loader를 사용하여 변환해줘
css-loader: CSS 파일을 읽어서 문자열 형태로 변환한다.style-loader: 위에서 변환된 문자열을 읽어와서index.html파일 내부에<style>태그로 스타일을 삽입해준다.
4. Plugins
- 로더는 특정 유형의 모듈을 변환하는데 사용된다면, 플러그인은 번들을 최적화 하거나, 애셋을 관리하고 , 환경 변수를 주입하는 역할을 한다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
-
플러그인 사용을 위해서는
require()를 통해 플러그인을 요청하고,plugins 배열에 추가해준다. -
다른 목적으로 플러그인을 여러번 사용 할 수 있으므로,
new연산자로 호출하여 플러그인 인스턴스를 만들어 사용한다. -
CleanWebpackPlugin: 빌드 이전 결과물을 제거하는 플러그인 -
HtmlWebpackPlugin: 옵션(template)으로 받는 HTML 파일을 참조하여 새로운 HTML파일을 생성하여, 최종적으로 만들어지는 새로운 HTML 파일에<script>태그를 자동으로 생성해준다.
5. devtool
- 소스맵 생성 여부와 방법을 제어한다.
- 소스맵이란, 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능을 한다.- 서버에 배포할 때 성능 최적화를 위해 모든 파일을 압축하는데, 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅 할 수 있을까?
- 이를 해결하기 위해 소스맵을 이용하여 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인 할 수 있다.
- 더 많은 설정 옵션 보러가기
6. resolve
- 모듈을 해석하는 방식을 변경 할 수 있는 옵션이다.
Extension 지정
- 기입된 확장자를 순서대로 해석한다.
resolve: {
extensions: [".js", ".css"],
},Alias 지정
const path = require('path');
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
},- 위와 같이
alias를 설정하여 상대 경로 대신 절대 경로를 사용 할 수 있다.
import Utility from 'Utilities/utility';학습 후기
- 이전에는 설정 파일의 각 프로퍼티가 어떤 역할을 하는지 제대로 모르고 막 썼구나...를 깨달았다.
- 웹팩은 어렵다. 하지만, 잘 쓰면 애플리케이션의 성능 뿐만 아니라 개발 효율까지 높일 수 있는 좋은 도구임이 틀림 없다.
참고 자료
기록