webpack에 대해 알아보자.
webpack?
webpack은 module bundler이다. 그럼 module은 뭐고 bundler는 뭘까?
module
module의 사전적 정의는 다음과 같다.
컴퓨터 시스템에서, 부품을 떼 내어 교환이 쉽도록 설계되어 있을 때의 각 부분.
예를 들어, 다음 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
body {
background-color: beige;
}
</style>
<title>test</title>
</head>
<body>
<h1 class="hello">Got it!</h1>
<script>
alert("hi");
</script>
</body>
</html>
이 코드는 html, css, javascript가 한 페이지에 구현되어 있다. 지금은 짧아서 괜찮지만, 코드가 길어지면 읽기 불편해진다는 단점이 있다. 그러니 아래처럼 바꿔보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>test</title>
</head>
<body>
<h1>Got it!</h1>
<script src="app.js"></script>
</body>
</html>
link tag를 통해 css 파일과 연결해줬고, script tag를 통해 js파일과 연결해줬다. 이 코드가 담긴 파일은 html만을 관리하는 파일이고 css, js를 관리하는 각각의 파일을 만들었다. 이 때 만든 "3개의 파일"을 각각 "모듈"이라고 부른다.
bundle
bundle의 사전적 정의는 다음과 같다.
[명사] 꾸러미, 묶음, 보따리
✅ 즉, module bundler(webpack)는 각각의 모듈들을 하나로 묶어 보따리로 만들어주는 것이다.
webpack이 필요한 이유
사람이 이해하기 쉽도록 module을 만들어서 구분했는데 굳이 다시 합치는 이유가 뭘까?
1. 빠른 로딩 속도
각각 모듈화된 파일들을 컴파일하려면 시간이 오래 걸린다. 하나의 파일로 만든 다음, 그 파일을 컴파일하면 훨씬 빨라진다.
2. js 파일 관리
아래의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>test</title>
</head>
<body>
<h1>Got it!</h1>
<script src="app.js"></script>
<script src="test.js"></script>
</body>
</html>
app과 test라는 js 파일을 연결해주고 있다.
✔ app.js
const sum = 1;
function app() {
console.log(sum);
}
app();✔ test.js
const sum = 2;
function test() {
console.log(sum);
}
test();
▶ 결과값
test.js에서 sum이 문제라는 것을 볼 수 있다. 즉, 변수 충돌이 발생한 것이다. 하지만 개발자가 일일이 변수명을 생각할 수도 없는 노릇이다. 그럼 webpack을 이용해서 출력해보자.
▶ webpack을 이용한 결과값
원하는 결과값이 나왔다. 그리고 webpack에 의해 변환된 test.js, app.js 파일을 보면 아래와 같이 바뀐 것을 알 수 있다.
// app.js
console.log(1);// test.js
console.log(2);사용방법
// webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
main: "./src/client/js/main.js",
},
mode: "development",
watch: true,
output: {
filename: "js/[name].js",
path: path.resolve(__dirname, "assets"),
clean: true,
},
plugins: [new MiniCssExtractPlugin({ filename: "css/style.css" })],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
};
entry, output, loader, plugins가 기본 개념이다. 하나씩 살펴보자.
1. entry
bundling하고 싶은 파일의 경로를 선언하는 곳이다.
module들이 많아질수록 의존적인 관계가 형성되기 마련이다. 그 관계의 시작점인 파일의 경로를 entry에 선언하면 된다. 위의 코드는 main.js가 그 시작점이 되는 파일이다. webpack은 main.js와 관련된 모든 파일을 하나의 파일로 묶는다.
2. output
bundling되고 만들어질 파일에 대한 정보를 적는 곳이다.
앞서 webpack이 묶은 하나의 파일을 다시 저장해야 한다. 파일을 어디에 저장할 것이며, 파일 이름이 무엇인지를 정하는 곳이다. 위의 코드는 assets/js경로에 파일이 저장되며, main.js라는 파일 이름을 가진다.
3. loader
파일처리하는 방법을 알려주는 곳이다.
webpack은 기본적으로 javascript만 처리할 줄 안다. 따라서, 그 이외의 파일(ex. css, babel, scss ...)을 처리하기 위해서는 loader를 이용해서 알려줘야 한다.
➡ test : loader를 적용시킬 파일 형태를 정규표현식으로 적는다.
➡ exclude : loader가 적용되는 동안 배제시킬 파일을 적는다.
➡ use : 적용시킬 loader에 관한 정보를 적는다. property로 loader만 사용할 경우에는 배열(object 써도 됨)을 적용하고 다른 property도 사용하려면 object를 적용한다.
babel-loader
babel과 webpack을 이용해 js 파일을 변환하는데 도움을 주는 loader다.
style-loader, css-loader, sass-loader
scss로 적힌 파일을 css로 바꿔주는 loader들이다. loader가 적용되는 순서는 "역순"(뒤->앞)이다.
4. plugin
bundling된 결과물을 처리하는 방법을 알려주는 곳이다.
loader가 파일처리를 한다면, plugin은 bundling된 결과물을 처리한다.
mini-css-extract-plugin
앞서 scss를 css로 바꾸기 위해 필요한 3개의 loader를 소개했다. 그렇게 생성된 output의 결과물은 다음과 같다.
물론 브라우저로 열면 잘 적용됐음을 알 수 있다. 그러나 bundling된 css 코드가 js파일에 있는 것이 좀 이상하다. css파일로 만들고 싶지만 output의 filename은 한번만 설정할 수 있다. 그래서 필요한 게 mini-css-extract-plugin이다. 아래는 이 plugin을 적용한 결과이다.
이로써 webpack에 대해 알아보았다.
