웹팩의 등장 배경
웹팩 이전의 환경
웹팩 이전의 환경에서는 자바스크립트에서 모듈이라는 개념이 없었다.
모듈이란, 프로그래밍에서 개별적인 기능을 하는 작은 단위로, 자바스크립트에서는 하나의 파일이 하나의 모듈을 담당한다고 말할 수 있다.
하나의 모듈은 하나의 모듈 스코프를 가질 수 있어서, 어떠한 변수들을 설정하던 간에 각 모듈간에는 영향을 미치지 않았다.
그러나 모듈이 없었을 때는 자바스크립트는 전역 스코프로 동작했기 때문에, 파일 별로 같은 변수명을 사용하게 될 경우, 식별자가 초기화 되는 문제점도 있었다.
<body>
<script src="./src/index.js"></script>
<script src="./src/home.js"></script> <!--아래 파일이 윗 파일에 영향을 줄 수 있다-->
</body>현재 최신 브라우저의 경우 module 시스템을 지원하지만, 모든 브라우저에서 해당 시스템을 사용할 수 있는 것은 아니다.
es6의 import / export가 등장하기 이전에는 commonJS 라는 모듈 시스템이 node.js에서 사용되었다. 이전에는 자바스크립트의 모듈화를 위하여 AMD나 Common.js같은 라이브러리로 해결해왔다.
현대 애플리케이션은 그 복잡도가 증가함에 따라 모듈 별로 파일을 관리해야할 필요성이 있었고, 웹팩이 이를 해결해 주었다.
웹팩이란?
웹팩은 다양한 모듈을 하나의 파일로 묶어주는 번들러이다. 웹팩을 도입하여 얻을 수 있는 문제의 해결은 다음과 같다.
- 식별자의 유효 범위 문제를 해결할 수 있다.
- 여러 모듈들을 하나의 파일로 묶어, 한번에 불러올 수 있기 때문에 로딩 속도가 빨라진다.
- 통일되지 않은 모듈 스펙들을 묶어서 import 할 수 있도록 해준다.
웹팩의 개념
일반적인 웹팩의 흐름은 다음과 같다.
entry → module → plugin → output
웹팩의 환경 설정을 보면서, 웹팩 내부에서 어떻게 동작하는지 살펴보자.
entry
- webpack에서 웹 자원을 변환하기 위한 진입점.
- 진입점은 여러 개가 될 수 있으며, SPA 환경에서는 index.js 하나만 사용하는 것이 일반적이다. MPA 환경에서는 여러개의 진입점을 둘 수 있다.
module.exports = {
entry: 'index.js',
}module
webpack을 통해 web application을 해석할 때, 자바스크립트 뿐만 아니라, css, img 등 자바스크립트 파일이 아닌 파일들을 해석할 수 있도록 도와주는 속성이다.
module.exports = {
module: {
rules: [
{
test: '\.(j|t)sx?$',
use: 'babel-loader', // react 또는 js 파일을 해석하는데 babel을 사용한다.
exclude: /node_modules/,
},
{
test: '\.s?css$',
use: ['css-loader', 'sass-loader'] // 오른쪽이 우선순위가 더 높다.
}
]
}
}rules 내부에 어떠한 파일들을 어떠한 loader를 이용할 것인지 정의할 수 있다.
- test: 파일의 확장자명
- use: 해당 파일에 사용할 loader
plugins
웹팩의 기본적인 동작에 추가 기능을 제공한다.
module.exports = {
plugins: [
HtmlWebpackPlugin() // HtmlWebpackPlugin은 자동으로 Html을 주입하는 플러그인이다.
]
}output
output은 webpack을 통해 번들링을 마친 결과물과 경로를 나타낸다.
module.exports = {
ouput: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist'),
}
}
출처
번역) 10분 만에 웹팩 배우기 (Learn webpack in under 10minutes)
