웹팩(Webpack) 최소설정으로 프론트엔드 개발 환경 만들기

( 참고 영상 : https://www.youtube.com/watch?v=rbmUFHZt3sg )

Webpack 초기 설정

1. npm init -y : package.json 파일 생성
   
   
   
2. npm i -D webpack webpack-cli : Webpack 관련 라이브러리 설치

• -D 를 붙이면 "devDependencies"로 저장됨 (-D를 붙이지 않으면 "dependencies"로 저장됨)
• webpack, webpack-cli 설치
  
  
  

3. npm scripts에 build 명령어 만들기

• npm run build로 앞서 설치했던 webpack script 실행 가능
• 아직 최소한의 옵션도 설정하지 않았기 때문에 지금은 명령어를 실행해도 warning, error 발생
  

4. webpack.config.js 파일 생성 및 옵션 작성

• mode : 빌드 목표에 따라 development / production 구별
• entry : 여러 개의 모듈로 연결된 파일의 시작점 (ex. ./src/index.js)
• output : 여러 개의 모듈을 하나로 만들어서 저장시킬 위치
  • path : 폴더명 (절대 경로)
    path는 node 모듈에서 path 모듈을 가져와야 한다.
    ➡️ const path = require("path")
  • filename : 파일명
    [name].js로 설정할 시, entry에서 설정한 key 값이 파일명으로 설정된다.
  
  ➡️ development 모드로 설정, 파일의 시작점은 "./src/app.js", 번들링된 파일은 "./dist" 폴더에 main.js라는 파일명으로 저장된다.

5. 설정한 위치에서부터 코드 작성한 뒤, 빌드하기

• src 폴더에 app.js 파일을 시작으로 하는 코드 작성
• npm run build 명령어로 빌드하면 dist 폴더에 app.js와 math.js가 병합된 main.js 파일 생성
  

6. src폴더 index.html에서 번들링된 파일 확인

• html에 main.js를 연결해 html을 열어 확인해보면 src 폴더에서 작성했던 코드 출력 값이 나타남
  

---

CSS 다루기 : css-loader, style-loader

7. app.css 파일을 만들어 스타일 지정하고 app.js에 import

• 이때, npm run build 명령어로 빌드를 시도하면, css 관련 Webpack 설정을 해주지 않은 상태라 module parse 에러가 발생함
  
  
  

8. css-loader, styled-loader 설치

npm i -D css-loader style-loader

9. webpack.congig.js에 css 관련 loader 설정

• test 속성에는 css의 정규 표현식을 할당
• use 속성에는 설치한 styled-loader, css-loader를 배열로 할당
• npm run build로 빌드해보면 main.js에 app.css에서 지정한 background-color가 적용돼 있음
  

---

이미지 파일 다루기 : file-loader

10. 이미지 파일을 src 폴더에 넣고 app.js에서 가져오기

• css 때와 마찬가지로 빌드 시도를 해도, 이미지 파일 관련 Webpack 설정을 해주지 않은 상태라 module parse 에러가 발생함
  
  
  

11. file-loader 설치

npm i -D file-loader

12. webpack.congig.js에 이미지 파일 관련 loader 설정

• test 속성에는 png 파일의 정규 표현식을 할당
• use 속성에는 설치한 file-loader를 배열로 할당
• npm run build로 빌드해보면 main.js에 이미지 파일이 적용돼 있고 dist 폴더에 이미지 파일이 생성됨
  

동영상에서는 위처럼 use 속성을 지정하면 dist 폴더가 경로에서 빠져 이미지가 깨져서 나왔다.
내 경우, 개발자 도구로 확인해보니 dist 폴더에서 알아서 가져왔다. (그 사이 개선된 건가?)
동영상에서는 아래와 같이 이미지 앞에 dist 폴더의 경로를 추가해줌으로써 문제를 해결했다.

---

HTML 다루기 : html-webpack-plugin

13. html-webpack-plugin 설치한다.

npm i -D html-webpack-plugin

plugin은 require로 생성자 함수를 가져와야 한다!

14. webpack.config.js 파일로 생성자 함수를 가져오고, plugins 배열을 생성해서 template 파일의 위치를 지정한 인자를 전달하여 HtmlWebpackPlugin 함수를 실행한다.

• 이전에 index.html에서 script 태그로 지정한 output 경로는 이제 plugin이 자동으로 넣어주기 때문에 해당 부분은 지워준다.
  
  
  
  

15. 빌드 명령어를 실행하면 dist 폴더에 index.html이 생성되고 브라우저 경로를 src에서 dist로 변경하면 기존 출력 화면을 확인할 수 있다.
    
    
    

16. 이미지 파일은 아래와 같이 hash 값이 아니라 원본 파일명과 확장자로 지정할 수 있다.
    

뒤에 ?[hash]를 붙인 이유를 설명해주시는데 잘 모르는 영역이라 이해가 되지 않는다...🫠
일단 파일을 호출할 때 최신 파일을 호출한다고 한다.
그리고 쿼리 문자열로 hash 값이 들어가면 브라우저가 가지고 있는 이미지 캐시를 사용하지 않도록 처리가 된다고 한다.

---

clean-webpack-plugin

dist 폴더에서 기존에 빌드했으나 지금은 사용하지 않는, 남아있는 파일을 plugin을 사용해 Webpack이 자동으로 삭제하도록 만들 수 있다.

17. clean-webpack-plugin 설치

npm i -D clean-webpack-plugin

18. webpack.config.js 파일로 생성자 함수를 가져오고, plugins 배열에 함수 실행 코드를 추가한다.

• html-webpack-plugin과 달리 구조분해할당으로 생성자 함수를 가져온다. 주의!!
  
  
  

19. 빌드 명령어를 실행하면 이전에 빌드했던 파일들이 모두 삭제되고 dist 폴더가 다시 만들어진다.

• 현재 빌드 환경에서 사용하지 않는 파일(쿼리명의 png파일)이 사라졌다!