목 차![down-arrow]()
〈
Webpack import
2024.03.19.
Import 기능
1. Import
React에서 App을 만들 경우, 모듈 및 함수, 패키지, 변수 값들을 간단하게import를 통해 가져와서 사용하였음- 이러한 Import 기능을 사용할 수 있는 이유는
웹팩에 이미 설정이 다 되어있기에 가능함
2. Import 기능 만들기
2-1. import 시도
- src/randomAddress.js 파일 생성하여 export하고 index.js로 import하기
// src/randomAddress.js
function getRandomAddress() {
return "서울";
}
export default getRandomAddress;// src/index.js
import getRandomAddress from "./randomAddress";
console.log(getRandomAddress());- 아직 설정이 안 되어있기에
SyntaxError: Cannot use import statement...발생함
2-2. Webpack 설치
- npm 초기화
- package.json 파일 생성
$ npm init -y- Webpack 패키지 설치
webpack과webpack-cli설치-D플래그 : devDependencies로 설치하게 되어 개발환경에서만 작동함
$ npm i -D webpack webpack-cli- package.json에서 의존성 패키지 설치 확인
//package.json
{
"devDependencies": {
"webpack": "^5.90.3",
"webpack-cli": "^5.1.4"
}
}- scripts 추가
- build를 위한 스크립트를 추가하기
"build": "webpack --mode production": src 폴더의 파일들을 빌드하여 dist로 넣어주는 스크립트
//package.json
{
"scripts": {
"build": "webpack --mode production"
}
}- build 스크립트 이용
npm run build명령어 실행
$ npm run build- 빌드 완료
- 자동으로 dist 폴더에
main.js파일이 생성됨
// dist/main.js
(() => {
"use strict";
console.log("서울")
})();- index.html에 main.js 파일 연결
- 기존의 index.js 파일이 아닌 main.js로 교체
- 이제 에러 발생하지 않고 콘솔 잘 출력됨
<!--dist/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Webpack</h1>
<script src="./main.js"></script>
</body>
</html>- 이미 만들어진 라이브러리 import 해보기
- nanoid라는 라이브러리 설치해서 사용해보기
$ npm install nanoid --save//package.json
{
"dependencies": {
"nanoid": "^5.0.6"
}
}- nanoid 라이브러리 index.js 파일로 import하기
// index.js
// ...
import { nanoid } from "nanoid";
console.log(nanoid());- 다시 npm run build로 빌드하기
// dist/main.js
(() => {
"use strict";
console.log(((o = 21) => {
let e = "", r = crypto.getRandomValues(new Uint8Array(o));
for (; o--;) e += "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[63 & r[o]];
return e
})()), console.log("서울")
})();- 콘솔에 nanoid가 생성한 유니크 id가 잘 출력됨을 확인할 수 있음
조정곤
주니어 프론트엔드 개발자
