![bg right:50% width:50%](https://cdn.markslides.ai/users/1/images/Y3eR2n7IxszosEu6PhVkF) # Webpack ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [Webpack 소개](#webpack-소개) - [Webpack Core Concepts](#webpackbr-core-concepts) - [Webpack을 사용하는 이유](#webpack을br-사용하는-이유) --- ![bg right:50% width:50%](https://cdn.markslides.ai/users/1/images/Y3eR2n7IxszosEu6PhVkF) # Webpack 소개 --- # A static module bundler
for modern JavaScript applications --- # Webpack이란? - 모던 JavaScript 애플리케이션을 위한 **정적 모듈 번들러** - 하나 이상의 entry point로부터 dependency graph를 생성 - 애플리케이션에 필요한 모듈들을 하나 이상의 번들로 생성 - 모든 ES5 호환(IE8 이하는 지원되지 않음) 브라우저를 지원 - 더 오래된 브라우저를 지원하려면 Polyfill 필요 --- ![bg right:50% width:50%](https://cdn.markslides.ai/users/1/images/Y3eR2n7IxszosEu6PhVkF) # Webpack
Core Concepts --- # Webpack 핵심 구성요소 - Entry - Output - Loaders - Plugins - Mode --- # Entry (or Entry point) - **애플리케이션의 시작점**을 나타내는 속성 - dependency graph를 생성하기 위한 모듈들을 찾기위한 시작 지점 - 기본 값: `./src/index.js` --- # Entry 설정 예시 **`webpack.config.js` 파일** ```javascript // Single entry module.exports = { entry: './path/to/my/entry/file.js', }; // Multi-main entry module.exports = { entry: ['./src/file_1.js', './src/file_2.js'], }; ``` --- # Output - **번들 파일 생성**과 관련된 속성 - 생성된 번들을 어디에 저장할지? - 번들 파일의 이름은 어떻게 할지? --- # Output 설정 예시 **`webpack.config.js` 파일** ```javascript const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), // 번들 파일 이름 지정 filename: 'my-first-webpack.bundle.js', // 여러 substitution을 사용하여 번들 이름 구성 filename: '[name].[contenthash].bundle.js', }, }; ``` --- # Loaders - Webpack은 JavaScript와 JSON 파일만 이해할 수 있음 - Loader를 통해 다른 유형의 파일들을 **애플리케이션에서 사용할 수 있는 모듈로 변환** - 예시 - TypeScript를 JavaScript로 변환 - JSX를 JavaScript로 변환 --- # Loaders 설정 예시 **`webpack.config.js` 파일** ```javascript const path = require('path'); module.exports = { output: { filename: 'my-first-webpack.bundle.js', }, module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, }; ``` --- # [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) 사용 예시 ```javascript module: { rules: [ { test: /\.(?:js|mjs|cjs)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: "defaults" }] ] } } } ] } ``` --- # Plugins - 다양한 작업들을 수행할 수 있게 해줌 - 번들 최적화, asset 관리, 환경변수 주입 등 - Loader에서 할 수 없는 작업들을 하기 위해 사용됨 --- # Plugins 설정 예시 **`webpack.config.js` 파일** ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); // built-in plugins에 접근하기 위함 module.exports = { module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], }; ``` --- # Mode - 번들링의 모드를 나타냄 - `development`, `production` 또는 `none`으로 설정 가능 - 기본 값은 `production` - 모드에 따라 Webpack의 기본 최적화를 사용할지말지 여부가 결정됨 --- # `mode` 값에 따른 기본 최적화 설정 | Option | Description | |---|---| | development | `DefinePlugin`의 `process.env.NODE_ENV` 값을 `development`로 설정. modules 및 chunks의 이름 식별 가능. | | production | `DefinePlugin`의 `process.env.NODE_ENV` 값을 `production`으로 설정. modules 및 chunks의 이름 식별 불가능.
`FlagDependencyUsagePlugin`, `FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`, `NoEmitOnErrorsPlugin`, `TerserPlugin` 적용. | | none | 기본 최적화 옵션 적용 안됨 | --- # Mode 설정 예시 **`webpack.config.js` 파일** ```javascript module.exports = { mode: 'development', ... }; ``` --- # 여러 개의 Webpack 설정 파일 사용 예시 **`webpack.development.config.js`** ```javascript module.exports = { mode: 'development', }; ``` **`webpack.production.config.js`** ```javascript module.exports = { mode: 'production', }; ``` --- ![bg right:50% width:50%](https://cdn.markslides.ai/users/1/images/Y3eR2n7IxszosEu6PhVkF) # Webpack을
사용하는 이유 --- ### Webpack을 사용하는 이유 1. # Code Splitting - 코드를 여러 개의 번들(bundle)로 분할 - 필요한 번들만 가져다 쓸 수 있음 - 번들을 병렬적으로 로딩하여 로딩 시간 단축 ```javascript import(/* webpackChunkName: "my-chunk-name" */ './my-module'); ``` --- ### Webpack을 사용하는 이유 2. # 다양한 형식의 파일들을 처리하고 변환 (feat. Loaders) - CSS, 이미지 파일, 폰트 파일, JSON, YAML 등 - Loaders 사용 예시 - `css-loader`, `style-loader`: DOM에 CSS 삽입 - `babel-loader`: 코드 변환 및 Transpiling --- ### Webpack을 사용하는 이유 3. # 번들 최적화 및 확장 (feat. Plugins) - 웹 애플리케이션의 성능, 크기, 그리고 기능성을 향상시킬 수 있음 - Plugins 사용 예시 - `TerserPlugin`: JavaScript 코드를 압축하고 난독화하여 번들 크기를 줄여줌 - `CssMinimizerPlugin`: CSS 파일 최적화 - `ImageMinimizerPlugin`: 이미지 최적화 - `HtmlWebpackPlugin`: 번들링 과정에서 생성된 파일을 자동으로 HTML에 포함시켜줌 - `BundleAnalyzerPlugin`: 번들 파일의 구조를 시각적으로 분석 --- # 마무리 - 모던 JavaScript 애플리케이션을 위한 **정적 모듈 번들러** - 애플리케이션에 필요한 모듈들을 하나 이상의 번들로 생성 - 코드 분할, 다양한 형식의 파일 처리 및 변환, 번들 최적화 및 확장 가능 - 핵심 구성요소 - Entry, Output, Loaders, Plugins, Mode - 환경에 따라 자유롭게 설정해서 사용할 수 있음 --- # References - https://webpack.js.org/ --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)