본문 바로가기
반응형

webpack31

11. 모듈 번들링과 로더 활용 - 3 이미지 및 폰트 등의 파일 처리 웹 개발에서는 이미지, 폰트와 같은 정적 파일들을 효과적으로 처리하는 것이 중요합니다. Webpack은 다양한 로더를 통해 이미지 및 폰트 파일들을 번들에 포함시킬 수 있습니다. 1. 이미지 로더 Webpack에서 이미지를 처리하기 위해서는 file-loader나 url-loader를 사용합니다. url-loader는 작은 이미지를 Data URL로 인라인화하여 번들 크기를 줄일 수 있습니다. 1.1 설치 npm install file-loader url-loader --save-dev 1.2 Webpack 구성 // webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/i, us.. 2023. 12. 24.
10. 모듈 번들링과 로더 활용 - 2 CSS, SASS, LESS 로더 활용 웹 개발에서 스타일링은 중요한 부분 중 하나입니다. Webpack은 다양한 로더를 통해 CSS, SASS, LESS와 같은 스타일 시트를 모듈화하고 번들링하는 기능을 제공합니다. 1. CSS 로더 Webpack은 기본적으로 CSS 파일을 모듈로 간주하여 로딩할 수 있습니다. style-loader와 css-loader를 조합하여 사용합니다. 1.1 설치 npm install style-loader css-loader --save-dev 1.2 Webpack 구성 // webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }.. 2023. 12. 24.
9. 모듈 번들링과 로더 활용 - 1 JavaScript 모듈화: ES6 모듈 vs CommonJS JavaScript의 모듈화는 코드를 구조화하고 재사용성을 높이는 데에 중요한 역할을 합니다. ES6에서 도입된 모듈 시스템과 CommonJS는 두 가지 주요한 모듈화 패러다임입니다. 1. ES6 모듈 ES6에서 도입된 모듈 시스템은 기존의 스크립트 태그를 사용한 방식과는 다르게 파일 간 의존성을 선언적으로 관리합니다. 이를 통해 명시적으로 필요한 모듈을 불러와 사용할 수 있습니다. 1.1 모듈 작성 및 사용 // math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; // main.js import { add, subtract } from './.. 2023. 12. 24.
8. Webpack의 핵심 개념 - 3 Webpack Plugin의 활용 Webpack은 Loader를 통해 모듈을 변환하는 역할을 수행하고, 이에 더해 Plugin을 통해 번들된 결과물에 다양한 작업을 수행할 수 있습니다. Plugin은 번들링된 자원에 대해 추가적인 처리나 최적화, 환경 변수 주입 등을 수행하여 프로젝트에 필요한 기능을 제공합니다. 1. Plugin의 개념 Plugin은 웹팩의 빌드 프로세스에 개입하여 특정 작업을 수행합니다. Loader가 각 모듈에 대한 변환을 담당한다면, Plugin은 번들된 결과물 전체에 대한 작업을 담당합니다. 2. Plugin의 활용 예시 다양한 Plugin이 존재하며, 그 중 몇 가지를 살펴보면서 실제 사용 예시를 살펴보겠습니다. 2.1 HtmlWebpackPlugin HtmlWebpackPlu.. 2023. 12. 24.
반응형