Webpack 폴더 및 파일 구조 생성, import 구현하기

webpack은 크게 dist와 src  두 개의 디렉토리 구조를 갖는다고 한다.

 

 

dist는 배포할 파일들 모이는 곳이고,

(react에서 npm run build 하면 생기는 파일들의 공간,

아무튼 이 안에 데이터가 있어야 웹에서 보)

src는 코드 작성하는 곳이다.

 

 

 

Import 기능 구현 - 이것도 웹팩이 해주던 거다. 맨드러보자

1. randomAddress.js 파일을 만들었다. 아래 그림 보자

2. index.js에서 가져와서 콘솔창 확인해봤다.

응, 안해줘

원래 다른 파일에서 가져오고 하려면 index.html에서 script 태그에 module 속성 넣어주면 되는 걸로 알고 있다.

근데 webpack 쓸거니까 그런거 하지말자.

서비스 커지면 module 넣다가 인생 끝날지도 모른다.

 

3. webpack 설치해볼 껀데, 이거하는데 nodejs 설치안한거면 이게 무슨일이고

아무튼

npm init -y 해서 package.json만들어준다. 어차피 나중에 수정되니까 -y해도된다.

npm i -D webpack webpack-cli 해서 개발용으로 웹팩이랑 웹팩cli깔아준다.

아무튼 뿅!

scripts 부분에 "test" 위에

"build": "webpack --mode production",

추가해준다.

그러면 dist 폴더에 main.js가 생긴다.

이제 dist 밑에 index.html에 script태그에 참조한 파일을 main.js로 바꿔준다.

  <script src="./main.js"></script>

그러면 됨, 아무튼 됨

짜란~

 

 

외부 라이브러리도 가져와보자

npm i nanoid 했다

import getRandomAddress from "./randomAddress";

import { nanoid } from "nanoid";

console.log(nanoid());

console.log(getRandomAddress());

index.js에 import 해줬다

 

다시 npm run build 해주면 main.js가 업데이트 된다.

 

잘 동작할 꺼다.

짜란~