1. module(모듈)
ㄱ. 예시코드
- 모듈 사용전
- 모듈 사용후
2. bundler(번들러)
- 모듈을 사용하면 유저의 입장에서 아래의 사진과 같이 자바스크립트 파일, 이미지등을 다운받게 되는데
- 그럴때 네트워크 커넥션이 많아지고 그럼 유저나 서비스를 제공하는 입장에서 많은 컴퓨팅 파워를 사용하게되면서 서비스 속도가 느려지게되는 단점을 보완하기위해
- 웹에서 모듈을 사용하고 여러개의 파일을 하나로 묶어서 제공하는것을 만든도구가 번들러 라고함
- 이 번들러의 대표가 webpack(웹팩)이라고함
-
3. 번들링
- 번들링은 여러 파일(주로 자바스크립트 파일)을 하나의 파일로 결합하는 과정
- 웹 개발에서는 여러 개의 모듈(자바스크립트 파일, CSS 파일 등)을 하나의 파일 또는 몇 개의 파일로 합쳐서 로드 속도를 향상시킴
4. webpack
ㄱ. 웹팩이란
- Webpack은 자바스크립트 애플리케이션의 모듈을 번들링하는 가장 인기 있는 도구 중 하나로 다음과 같은 특징이 있음
- 모듈 번들링: 자바스크립트, CSS, 이미지 파일 등 다양한 파일 형식을 모듈로 취급하고 번들링함
로드 타임 최적화: 코드 스플리팅, 트리 쉐이킹(tree shaking) 등의 최적화 기술을 사용하여 로드 타임을 줄일수있음 - 확장성: 플러그인과 로더를 통해 기능을 확장할 수 있습니다. 예를 들어, Babel을 사용하여 ES6 코드를 ES5로 트랜스파일링하거나 Sass를 CSS로 컴파일링할 수 있음
- 개발 편의성: 개발 서버, HMR(핫 모듈 교체) 등 개발 편의성을 위한 다양한 기능을 제공
ㄴ. 웹팩의 도입
- 위의 코드에 웹팩을 도입하면 리펙트링 효과로 기존의 코드를 유지하지만 여러개의 파일을 하나로 묶는 번딜링하는것을 웹팩을 사용할것
ㄷ. 웹팩설치
- node를 설치해둘것
- node.js의 프로젝트 폴더로 선언하기 위해 명령어 입력
npm init npm init하고 나면 디렉토리에package.json이 생성됨
- 그후
npm install -D webpack webpack-cli일 실행하면package.json에devDependencies가 추가되고 node_modules폴더와 그안에webpack, webpack-cli폴더가 생김
ㄹ. Entry 파일
index.js파일을 만들고
public폴더 만들고index.js에서 import해온파일의 경로를 맞게 수정후- webpack에게 이 프로젝트의 entry는 source 폴더에 있는 index.js파일이고
- 이걸 어디로 출력(output)할거냐면 public 폴더의 index_bundle.js 라는 이름으로 index.js의 파일과 그파일 사용하는 모든걸 하나로 만들어서 가져다놔가 아래의 코드
npx webpack --entry ./source/index.js --output-path ./public --output-filename index_bundle.js- 그럼 public 폴더안에 아래와같이 hello world가
보여짐 - network탭에서도 이전처럼 두개의 파일을 가져오지않고 하나의 파일만을 가져오지만 같은결과를 보여줌
- 이렇게 번들링을하면 나름 최신기술인 import를 지원하지않는 오래된 브라우저에서도 import를 한것과 같은 결과물을 내줌
5. webpack설정
- webpack.config.js 파일을 만든후 아래이미지와같이 설정해둔후
- 터미널에
npx webpack --config webpack.config.js명령어 또는npx webpack을 치면됨 
6. mode
- 아래 이미지와 같이 webpack.config.js 파일에 mode를 development로 설정하면
-
- 기존 npm webpack을 실행했을때 뜨던 WARNING 경고가 뜨지않음
7. loader(로더)
public폴더에style.css를 만든후 css효과를 적은후
- 네트워크 탭을보면 css 파일을 다운받게 되는데 이것도 같이 번들링 하는것을 loader
- js, css말고도 png, jpg 등도 웹팩을 사용해서 번들링이 가능함
npm install --save dev style-loader css-loader를 터미널에 입력후webpack.config.js파일을 아래와 같이 수정해주는데 웹팩이 .css라는 확장자를 만나면 알아서 css파일을 웹팩안으로 알아서 로드 시켜주는 명령어가css Loader
public폴더안에 있는css 파일을 souce파일로이동시켜줌 이유는 번들링 할거기 때문 그후 html에작성된 script를 지우고index.js에서 css파일을 import해줌
- 그럼 css파일을 불러와지는데 아마 style은 적용이 안될텐데 그때 아까 같이 설치해둔 style-loader를 적용시켜주면
- 아래 이미지와 같이 네트워크탭이 번들링도 잘됐고 스타일도 잘 적용됨
- 즉 로더는 우리가 입력한 에셋(css, png등)을 로더를 통해 가공후 output을 만들어주는거고
- 그걸 작성하는곳은 module에 rules에 적는것임 작동방식은 아래에 있는거부터 작동하니 아래에 css를 적고 그 위에 style을 적어야 함
8. output
index.html파일과source폴더에about.js라는 파일을 만들고index.js와 같이 번들링을 하고싶을때는 아래 이미지처럼 폴더와 파일을 만든후webpack.config.js파일에entry와 filename을 수정해주는데name이라고 적혀있는건 웹팩에서 제공하는 메소드로 entry에 적용된 파일의 이름을 name안에 넣어줌
- 그러면 index.html에서는 index의 번들러를
- about.html에서는 about의 번들러를 가져오게됨
10. plugin(플러그인)
HtmlWebpackPlugin의 플러그인을 사용할건데 html을 자동으로 만들어줌
-public안에js파일들을 지운후npx webpack을 입력하면 아래이미지와같이 js와 html을 만들어줌
개발작