🙇♂️ 서론 🙇♂️
이 글은 개발한지 1년이 된 예비 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다.
문제가 있거나 수정했으면 하는 부분은 댓글로 알려주시면 감사하겠습니다.
what is webpack
webpack은 javascript file들을 dependency에 따라서 파일을 모아 주는 번들러 입니다.
why we use webpack?
그럼 우리는 왜 웹팩을 사용하는 것일까요? 이유는 단순합니다.
브라우저 입장에서 여러개의 파일을 다운받는 것은 매우 부담스럽고, 무겁습니다.
그래서 webpack은 엄청나게 많은 파일들을 적은 수의 파일로 묶어서 넘겨 주는 것입니다.
webpack의 장점
webpack말고도 gulp나 다른 여러가지 번들링 툴들이 있는데 우리는 왜 굳이 webpack을 사용하는 것 일까요? 이유는 2가지 정도 있습니다.
1. dependency에 따라서 파일을 나누어 준다.
2. 위의 장점을 가진 툴 중 가장 빠르다.
webpack 사용법
초기
우선 프로젝트에 webpack을 npm으로 다운받는다.
그리고 webpack.config.js 안에 다음과 같은 것들을 작성한다.
entry
webpack을 적용 할 폴더를 지정하는 속성으로써, 다음과 같이 사용한다.
{
entry: './src/index.tsx',
// 여러개의 entry를 넣어줄 수도 있다.
entry: {
pageOne: '경로1',
pageTwo: '경로2',
}
}output
webpack을 적용한 후에 어떤 폴더로 나오게 할 것인지 정하는 속성이다. 다음과 같이 사용한다.
output: {
path: path.join(__dirname, '/dist'), // 현재 디렉토리에 /dist 폴더 경로에 파일을 넣겠다.
filename: 'bundle_[hash].min.js', // 파일 이름은 bundle_[해쉬처리].min.js로
},loader
webpack이 js와 json만 알아먹는다는 단점을 보완하기 위한 속성.
다른 파일들 번들링 하기 위한 로더를 각 파일 확장자 마다 지정해 줄 수 있다.
rules: [
{ test: /\\.css$/, use: 'css-loader' },
{ test: /\\.ts$/, use: 'ts-loader' }
]plugins
plugins는 loader 이외의 역할을 수행하는 말 그대로 플러그인이다. 다음과 같이 사용한다.
plugins: [
new webpack.ProgressPlugin(), // 물론 플러그인은 npm으로 다운받는다.
new HtmlWebpackPlugin({template: './src/index.html'})
]mode
webpack에는 여러가지 모드들이 있다. 실제 배포용인지, 개발용인지 같은 모드들이 있는데,
그 모드들을 어떤 모드를 이용해서 bundling 할 것인지 지정해 주는 속성. 다음과 같이 사용한다.
mode: 'production'
//development, production, none 와 같이 다양한 모드가 있다.
// 모드마다 지원하거나 지원하지 않는 기능들이 있다.출처
https://nesoy.github.io/articles/2019-02/Webpack
https://webpack.js.org/
