Webpack

모듈

모듈(module)이란 프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위를 의미한다.

보통 하나의 소스 파일에 모든 함수를 작성하지 않고, 함수의 기능별로 따로 모듈을 구성하며 이러한 모듈을 합쳐 하나의 파일로 작성하는 방식으로 프로그램을 만들게 된다.

 

 

=>재사용성과 코드 간결화

 

1. module.export{} => require('path')
2. import 'name' from 'path' (Esm 표준)
3. 모듈의 종류
   • 내장코어(실행)
   • 커뮤니티(NPM-CLI, ESM표준)
   • 로컬

 

 

번들

 

다양한 파일을 모듈로 다루는데, webpack에서 또한 가능한데, js hbs, jpg,png, sass,css 등의 다양한 파일과 참조관계를 파일로 묶는 것을 번들이라고 한다.

+ 번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업!

 

 

번들은 왜 중요할까?

• 모든 모듈을 검색하는 시간이 단축된다.
• 사용하지 않는 코드를 제거해 준다.
• 파일의 크기를 줄여준다.(2번 조건 + 참조관계의 파일)

 

 

Webpack

 

Webpack이란?

모듈번들러를 위한 도구.

 

Webpack 이해

Webpack 기본구조

 

 

Entry & Output

• Entry : 모듈의 의존 관계를 이해하기 시작점을 설정
• Output : 웹팩이 만든 번들 파일에 대한 설정

((Terminal))

PS C:\Users\Gold\Desktop\fastcampus_webpack> npm init -y 
Wrote to C:\Users\Gold\Desktop\fastcampus_webpack\package.json:

{
  "name": "fastcampus_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"      
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


---


PS C:\Users\Gold\Desktop\fastcampus_webpack> npm install webpack webpack-cli --save-dev


---


PS C:\Users\Gold\Desktop\fastcampus_webpack> npx webpack

터미널에서 npx webpack 커맨드를 실행하면 웹팩이 script.js 파일을 읽어들여 dist 디렉터리에 main.js 파일로 묶어냄.
---


PS C:\Users\Gold\Desktop\fastcampus_webpack> npx webpack --target=node // (빌드설정)

 

npm, npx란?

NPM란?

NPM는 Node Package Manager의 약자이다.

자바스크립트 패키지 매니저이고 NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며 설치/관리를 수행할 수 있는 CLI를 제공한다.

npm에서는 `package.json` 파일로 프로젝트의 정보와 패키지들의 의존성을 관리한다.

`package.json` 에는 사용하고 있는 패키지들의 명세가 작성되어 있기 때문에 프로젝트를 다른 사람에게 공유하고 싶다면 package.json을 공유하여 개발 환경을 빠르게 구축할 수 있다. JAVA에서는 Maven의 pom.xml과 비슷한 역할을 한다고 한다. package.json은 프로젝트 루트에서 `npm init -y` 명령어로 생성할 수 있다.

참고 : https://velog.io/@prayme/NPM%EC%9D%B4%EB%9E%80

 

NPX란?

npx는 새로운 패키지 관리 모듈이 아닌, 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구이다.

정확히는 npm을 좀 더 편하게 사용하기 위해서 npm에서 제공해주는 하나의 도구이다.

npx 는 패키지를 임시 설치해서 "실행"하는 용도이니, react 와 같은 library 를 설치할 수는 있지만 실행이 안 되므로 npx로 설치가 불가능하다.

만약 npx 로 react를 설치할거라면 create-react-app 라는 명령어로 사용한다.

npx로 할 수 있는 것,,,

• 패키지 임시 설치 및 실행
• npm 으로 설치할 명령어를 줄여줌
• 다른 버전의 노드 실행 가능
• gist 에 스크립트 공유 가능

참고 : https://basemenks.tistory.com/232

npx 란 무엇인가!! (node JS)

 

 

webpack.config.js

const path = require('path');

module.exports = {
    mode : 'production',
    entry: './src/index.js',
    output : {
        path : path.resolve(__dirname, 'dist'),
        filename : 'bundle.js'
    },
    target : 'node'
}