반응형 모듈 번들링과 로더 활용3 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. 이전 1 다음 반응형
