Webpack이란?
Webapck이란 Javascript 기반의 모듈 번들러다.
Webpack에 대한 정의를 검색할 경우 많이 볼 수 있는 문장이다. 여기서 말하는 모듈과 번들러란 뭘까?
모듈이란?
Javascript의 변수는 기본적으로 전역 범위를 가진다. 이 경우 아래와 같은 문제가 생길 수 있다.
// testA.js
var num = 10;// testB.js
num = 20;// main.js
<body>
<script src="./testA.js"></script>
<script src="./testB.js"></script>
<script>
console.log(num); // 20
</script>
</body>testA의 변수 num과 testB의 변수 num이 전역변수기 때문에 main.js 에서 어디서든 접근할 수 있게된다. 이런 경우 변수가 중복되어 다른 사람이 작성한 변수를 내가 모르고 변경해버리는 일이 생길 수 있다.
이러한 문제를 해결하기 위해서 CommonJS와 AMD(Asynchronous Module Definition)이 등장했다. 모듈을 export, import 하는 과정을 통해 모듈의 스코프를 지정하고 독립적으로 사용가능하다.
번들러란?
'번들링한다'의 의미는 우리가 만든 자원(HTML, CSS, Javascript, 폰트 등)을 하나의 파일 또는 여러개의 파일로 묶어주는 과정을 의미한다.
여러개의 파일로 나누어져있는 모듈을 병합하고 압축하여 크기를 줄일 수 있다. 또한 서버와 HTTP 통신 시 모듈이 각각 나눠져있다면 요청을 여러번 보내야 하지만 번들링을 통해 압축된 번들에 대한 요청 하나로 처리할 수 있다.
번들링의 장점
1. 원본 파일에 비해 실행 시 속도를 높일 수 있다.
2. 거대해진 코드를 번들을 통해 나누어 관리할 수 있다.
3. 여러 모듈이 압축된 파일을 요청하므로 네트워크 비용을 줄일 수 있다.
구성요소
Webpack의 주요 구성요소에 대해 알아보자.
Entry
웹팩의 빌드가 시작되는 지점.
module.exports = {
entry: './src/index.tsx',
};Output
빌드된 결과물 출력경로, 파일 이름 설정
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'), // 출력 파일 디렉토리
filename: '[name].[chunkhash].bundle.js',
// 출력 파일의 이름을 진입점과 파일 변경시 캐싱을 처리하기 위한 chunkhash로 생성
publicPath: '/', // 모든 파일에 대한 기본 경로 지정
clean: true, // 최신파일만 존재하도록 설정
},
};Loader
Webpack을 기본적으로 Jacascript와 JSON 파일만 이해할 수 있다. 하지만 CSS, 이미지 등 다른 종류의 파일을 읽어들이기 위해 Loader를 사용해 번들링할 수 있다.
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
// 확장자가 js,jsx,ts,tsx 인 파일을 보면 esbuild-loader를 통해 변환해줘
exclude: /node_modules/,
// node_modules에 있는 파일은 제외
loader: 'esbuild-loader',
options: {
target: 'es2021',
loader: 'tsx',
minify: true,
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg)$/i,
issuer: /\.[jt]sx?$/,
use: ['url-loader'],
},
],
},
};위의 예제 에서 test 부분에 있는 정규식에는 따옴표를 붙이지 않도록 주의!
Plugin
Webpack의 부가적인 플러그인을 추가해 기능을 확장한다.
module.exports = {
plugins: [
new webpack.ProvidePlugin({
React: 'react',
}), // 자주 사용하는 모듈 자동 로드
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
favicon: path.resolve(__dirname, './public/icons/favicon.ico'),
manifest: path.resolve(__dirname, './public/manifest.json'),
}), // html파일을 템플릿으로 생성할 수 있게 도와주는 Plugin
new CopyPlugin({
patterns: [{ from: 'public/icons', to: '' }],
}), // public 폴더의 아이콘과 같은 정적 파일을 dist에 넣어주는 Plugin
new Dotenv(), // 환경변수 관련 Plugin
],
};