반응형 분류 전체보기209 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. 7. Webpack의 핵심 개념 - 2 Webpack Loader: 모듈 변환의 핵심 Webpack은 다양한 자원(JavaScript, CSS, 이미지 등)을 모듈로 보고, 각 모듈에 맞게 변환해주는 기능을 수행합니다. 이를 가능하게 하는 것이 Loader입니다. Loader는 웹 애플리케이션을 구성하는 자원들을 가져와서 웹팩이 이해하고 처리할 수 있는 형태로 변환하는 역할을 합니다. 1. Loader의 역할 Loader는 크게 두 가지 주요 역할을 수행합니다. 1.1 변환 (Transformation) 자원을 가져와서 원하는 형태로 변환하는 작업을 수행합니다. 예를 들어, Babel Loader는 ECMAScript 2015+ 코드를 이전 버전의 JavaScript 코드로 변환해주는 역할을 합니다. 1.2 적용 (Application) 변환.. 2023. 12. 24. 이전 1 ··· 39 40 41 42 43 44 45 ··· 53 다음 반응형
