웹팩으로 Vanila JS 프로젝트 번들링하기/CSS 파일 만들기

학습 목적웹페이지 클론 코딩 과제를 하던 중 확인 가능한 CSS파일이 포함되어있는 조건이 있어 구현하기위해SCSS -> CSS 파일 만들기mini-css-extract-plugin 설치하기먼저 필요한 라이브러리를 설치하자npm install --save-dev mini-css-extract-pluginwebpack.config.js 파일 수정const MiniCssExtractPlugin = require('mini-css-extract-plugin');//맨 위에 추가하기module.exports = { ... module: { rules: [ { "test": /\.s[ac]ss$/i, "use": [ ..

• format_list_bulleted 개발 공부/Webpack
• · 2024. 8. 7.
• textsms

웹팩으로 Vanila JS 프로젝트 번들링하기/이미지 번들링 with. file-loader

학습 목적웹팩에서 이미지 파일사용을 하기 위해과제를 성공적으로 끝마치기 위해놀랍게도 웹팩에서 이미지를 사용하려면 이미지 번들러를 따로 추가해줘야 한다..이를 몰랐기 때문에 이미지를 적용하는데 시행착오가 좀 많았지만 해결했으니 이 과정을 글로 남겨본다.웹팩에서 이미지가 정상적으로 사용될 때파일 상단에 사진을 import 해준 뒤 태그의 src에 "사진 이름.확장자"를 입력해주면 된다.import "..사진 경로/사진.jpg";... 하지만 아직 이미지 번들러를 사용하지 않았다면 이미지의 경로를 찾을 수 없다는 에러메시지와 함께 적용이 되지 않을것이다.이는 우리가 웹팩에서 dist 폴더에 bundle된 파일들을 위치시켜놨었는데 이 폴더에서 이미지를 찾을 수 없기 때문이다.아래에 어떻게 하면 되는지 방법을 ..

• format_list_bulleted 개발 공부/Webpack
• · 2024. 8. 7.
• textsms

웹팩으로 Vanila JS 프로젝트 번들링하기/SASS(SCSS)

학습 목적웹페이지 클론 코딩 과제를 하던 중 SCSS 컴파일을 위한 Webpack이나 Parcel 같은 번들러를 활용하는 선택 요구사항을 충족시키기 위해번들러를 사용하는 목적이 알고 싶어서웹팩이 궁금해서 & VanilaJS 프로젝트를 위해 빌드해보고 싶었다.웹팩이란?프론트엔드 프레임워크에서 많이 사용되는 모듈 번들러모듈 번들러:웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, image, font 등)을 모듈로 보고 이들을 단일 Javascript 파일로 묶는데 사용되는 도구모듈: 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위모듈 번들링이란?웹 애플리케이션을 구성하는 수많은 자원들을 하나의 파일로 병합 해주는 동작을 말한다.빌드, 번들링, 변환은 전부 같은 의미웹팩은 왜 사..

• format_list_bulleted 개발 공부/Webpack
• · 2024. 8. 7.
• textsms

Webpack 이란?

안녕하세요.제가 리액트를 시작하며 CRA를 이용해 개발환경을 설정했었는데 용량이 너무 크다는 단점에 직접 개발환경을 설정해보자 Webpack을 알아보게 되었습니다.함께 웹팩이란 무엇인가를 알아보겠습니다.Webpack이란?웹팩은 모던 javascript 애플리케이션을 위한 정적 모듈 번들러입니다. 웹팩이 애플리케이션을 처리할 때, 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.디펜던시 그래프activity 사이의 종속성을 표현한 그래프. 애플리케이션에서 필요한 모든 모듈을 포함.한 파일이 또 다른 파일에 의존할 때마다 웹팩이 그것을 종속적으로 취급한다는 점은, 웹팩이 코드가아닌 (이미지나 폰트같은)자산을 사용하고 자산을 애플리케이션에 종속적으로 제공할 수 있게한다.웹팩..

• format_list_bulleted 개발 공부/Webpack
• · 2024. 8. 5.
• textsms