webpack-assets

Posted on In

assets

webpack 을 기본적인 사용 방법과 assets 를 다루는 방법을 살펴 본다.

먼저 webpack 을 사용하기 위해서 webpack 을 다운 받아야 한다. 

1
yarn add webpack webpack-cli -D

webpack 은 자바스크립트 파일을 하나로 번들링 하여 여러 종속성을 관리할 수 있도록 해준다. 이렇게 다운 받으면 webpack 명령어를 사용하면 되는데, 이때에는 글로벌로 설치해야 한다. 글로벌로 설치하고 싶지 않다면 package.json 에 scripts 을 추가하면 되는데 뒤에 내용에서 다룬다.

다음으로 기본적인 webpack 의 설정 파일을 작성한다

webpack.config.js

1
2
3
4
5
6
7
8
9
const path = require("path");

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

webpack 을 실행하면 webpack 은 webpack.config.js 파일을 찾아서 설정을 확인하고 webpack 을 실행한다.

  • entry : 앱의 진입점이 되는 js 파일
  • output : 번들링 한 후 번들링 된 파일의 이름, 패스 지정

위에 설정 대로하려면 dits 폴더를 만들고 /src/index.js 파일을 만든다. 그리고 dist 폴더안에 index.html 파일을 생성한 후 다음과 같이 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

dist 폴더 내에서 번들링 결과로 main.js 파일이 생길 것이므로 main.js 추가해 주었다.

그리고 webpack 을 실행하는 명령을 package.json 에 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
	"name": "test",
	"version": "1.0.0",
	"private": true,
	"license": "MIT",
	"scripts": {
		"build": "webpack"
	},
	"devDependencies": {
		"webpack": "^5.75.0",
		"webpack-cli": "^5.0.1"
	},
  "dependencies": {
		"lodash": "^4.17.21"
  }
}

추가적으로 종속성 관리를 확인해 볼 수 있도록 lodash 를 설치하고 yarn add lodash src 폴더와 index.js 파일을 추가한다.

1
2
3
4
5
6
7
8
9
10
11
import _ from "lodash";

function component() {
  const element = document.createElement("div");

  element.innerHTML = _.join(["Heelo", "webpack"], " ");

  return element;
}

document.body.appendChild(component());

이제 yarn build 를 터미널에서 실행하면 dist 폴더에서 번들링된 결과물을 확인할 수 있다.

Assets 가져오기

다음으로 assets 을 가져오는 방법을 알아본다. webpack 의 빌트인 모듈을 사용하면 이미지와 폰트는 설정 만으로 import 할수 있다. 하지만 css 의 경우 추가적인 설치와 설정이 필요하다.

css 를 사용하기 위해서는 style-loader, css-loader 가 필요하다. 추가적으로 scss 를 사용하기 위해서는 sass 와 sass-loader 가 필요하다.

1
yarn add style-loader css-loader sass sass-loader

이미지와 폰트는 빌트인 모듈을 사용가능하다. webpack.config.js 에 다음 내용을 추가한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
    ],
  },
};

이제 간단한 scss 파일과 index.js 에 파일을 추가하도록 한다.

utils.scss : 

1
2
3
4
5
@mixin squre($size) {
	$contentSize: 2rem * $size;
	width: $contentSize;
	height: $contentSize;
}

style.scss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@import './utils.scss';

@font-face {
	font-family: 'MyFont';
	src: url('./Dongle-Regular.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: 'MyFont';
	src: url('./Dongle-Light.ttf') format('truetype');
	font-weight: 300;
}

@font-face {
	font-family: 'MyFont';
	src: url('./Dongle-Bold.ttf') format('truetype');
	font-weight: 700;
}

.box {
	color: white;
	@include squre(5);
	background: url('./profile.png');
	background-size: contain;
	img {
		@include squre(1);
	}
}

html {
	font-family: 'MyFont';
	font-weight: 400
}

.light {
	font-size: 4rem;
	font-weight: 300;
}
.regular {
	font-size: 4rem;
	font-weight: 400;
}
.bold {
	font-size: 4rem;
	font-weight: 700;
}

font 를 사용하기 위해 구글 폰트에서 Dongle 채를 다운 받아왔다.

그리고 적당한 이미지 파일을 추가하도록 한다. 여기서는 profile.png 파일을 추가했다.

이제 index.js 에서 리소스를 사용하는 코드를 추가한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import _ from "lodash";
import "./style.scss";
import Icon from "./profile.png";

function component() {
  const element = document.createElement("div");

  element.innerHTML = _.join(["Heelo", "webpack"], " ");
  element.classList.add("box");

  const myIcon = new Image();
  myIcon.src = Icon;

  element.appendChild(myIcon);

  return element;
}

function divBox(text, className) {
  const el = document.createElement("div");

  el.innerHTML = text;
  el.classList.add(className);

  return el;
}

document.body.appendChild(component());
document.body.appendChild(divBox("안녕하세요 웹펙 테스트 중입니다.", "light"));
document.body.appendChild(
  divBox("안녕하세요 웹펙 테스트 중입니다.", "regular")
);
document.body.appendChild(divBox("안녕하세요 웹펙 테스트 중입니다.", "bold"));

이제 다시 yarn build 를 수행하면 dist 폴더에 index.html 에서 결과물을 확인할 수 있다.