오늘 포스팅에서는 Webpack에 대해 알아보겠습니다.
Google에서 webpack을 검색하면 설명에 그렇게 표시됩니다.
웹팩은 오픈 소스 자바스크립트 `모듈 번들러`이다.
주로 자바스크립트를 위한 `모듈 번들러`이지만 호환 플러그인을 포함하는 경우
HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다.
웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다
“모듈 번들러”라고합니다.
설명하기 전에 모듈 번들러를 잘라 설명하겠습니다.
– 모듈: 관련 데이터 및 기능을 포함하는 프로그램을 구성하는 구성 요소입니다. 유니폼 단위보지마.
파일을 모듈로 생각할 수 있습니다.
– 번들러: 종속 모듈 코드를 단일 파일로 변환 장비 보지마.
MVC 패턴의 경우 controller.js / service.js / repository.js 정도로 생각하시면 될 것 같습니다.
그렇다면 Webpack이 필요한 이유는 무엇입니까? – 필요는 발명의 어머니!
블로그 정리하고 구글링하면서 좋은 말을 인용했습니다.
왜 Webpack을 사용해야 하는가는 바로 왜 웹팩이 만들어졌는지의 이유와 일치한다.
잠시 역사를 짚어보면, 약 2010년경부터 불붙은
자바스크립트 프레임워크 전쟁을 통해 자바스크립트 웹 개발 추세가 치솟는
추세에서 거침없는 모듈의 도입으로 애플리케이션이 눈덩이처럼 커지고,
폭발적으로 변화 성장하는 프론트엔드 생태계의 미지의 바다에 휩쓸려 개발자가 작성하는 언어와 방법 종류도 브라우저들이
이해하기 벅찰 속도로 증가되었다.
위와 같은 상황에 대처하기 위해 나온 것 중 하나가 “번들”입니다!
이제 기본 실행부터 시작하겠습니다.
#웹팩 표준 실행
1. 관련 패키지 설치
npm init -y
npm install webpack webpack-cli
2. 프로젝트 구성
디렉토리를 생성하기만 하면 됩니다. src라는 폴더를 만들고 그 안에 index.js 파일을 만들었습니다.
3. 웹팩 구성 파일
– 좋아요 ( .babelrc )는 babel의 기본 구성을 도와줍니다.
Webpack에는 기본 환경 설정에 도움이 되는 파일 이름도 있습니다.
** webpack.config.js **
구성 파일에서 기본 설정을 지정합니다.
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
}
기입 :: webpack과 함께 묶을 파일을 지정합니다.
출구 :: 번들링 결과는 dist 폴더를 생성하여 bundle.js로 저장합니다.
(파일 이름과 경로 참고)
※ 나중에 다룰 것이다 모듈_규칙 또한 있습니다
모듈_규칙javascript 파일을 처리하도록 babel-loader를 설정하는 것입니다.
babel-loader는 babel 구성 파일을 사용하므로 babel.config.js 파일의 내용을 설정 값으로 사용합니다.
4. 예제 코드 작성
const React = require('react')
const ReactDOM = require('react-dom')
console.log(React)
console.log(ReactDOM)
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(React.createElement('div', null, 'hello World!'))
이것이 index.js 파일의 내용입니다. 아직 JSX를 사용하지 않기 때문에 React.createElement()를 통해
div를 만들고 ‘hello world’를 인쇄했습니다.
5. 웹팩 실행
npx webpack
npx webpack을 실행하면 dist 폴더에 bundle.js 파일이 생성됩니다.
어마어마한 외국어인데… HTML 파일을 만들어서
이렇게 하면 브라우저의 div에 hello world가 표시되는 것을 확인할 수 있습니다.
방금 webpack 사용법을 배웠습니다.
이 시간 웹팩 로더시도해 봅시다.
webpack의 로더 설정은 기본 설정입니다.
다양한 유형의 파일을 모듈화할 수 있습니다.
아마도 우리가 자주 사용하게 될 CSS와 이미지가 가장 중요할 것입니다.
이 시간 웹팩 로더CSS 모듈을 번들로 묶자.
다섯 단계로 빠르게 해봅시다.
1. 관련 패키지 설치
npm init -y
npm install webpack webpack-cli css-loader style-loader
2. 프로젝트 구성
위와 같이 디렉토리를 구성해 봅시다.
src 폴더에 index.js와 index.css를 생성했습니다.
3. 웹팩 구성 파일
** webpack.config.js **
const path = require('path')
module.exports = {
entry: './src/index.js',
module: {
rules: (
{
test: /\.css$/,
user: ('style-loader', 'css-loader'),
},
),
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
}
위의 코드에서와 같이 항목을 index.js로 설정하고 출력을
파일명은 dist 폴더에 생성된 bundle.js가 됩니다.
할 것이다
module.ruels의 코드를 말로 설명하려면
“ 웹팩 컴파일러다!
‘‘test’에 지정된 파일 형식을 찾지 못합니까?
번들에 넣기 전에 ‘사용자’를 추가했습니다. 지정된 로더로 변환해야 합니다!“
정말 좋은 말로 표현하자면 다음과 같습니다.
4. 예제 코드 작성
import './index.css'
console.log('hello world')index.js
* {
margin: 0;
padding: 0;
background: red;
}
index.css
5. 웹팩 실행
npx webpack
dist 폴더에 bundle.js라는 파일을 생성합니다.
위와 같이 HTML에 추가하여 사용하면 css와 js가 결합된 것을 볼 수 있습니다.