Front-end/Webpack7 7. webpack에 대한 이해(사용목적, 기본개념) - Vue 프로젝트 클론코딩을 완료한 이후, Vue와 webpack에 대한 기본적인 개념적 이해가 궁금했다. - 그러므로 본 포스팅에서 webpack을 왜 사용하는지와 webpack의 기본구조에 대한 이야기를 해보려고 한다. 1. webpack을 사용하는 이유 프론트 개발의 영역이 넓어지면서 JavaScript를 이용한 다양한 기술적 풀이가 생겨났다. 하나의 웹 페이지에 연결된 JS파일이 많아지면서 관리에 있어 한계가 발생했고, 웹사이트의 로딩속도가 길어지고 그만큼 더 많은 요청이 발생하여 네트워크 비용이 증가했다. 더불어, JS파일이 많아지면서 서로의 scope를 침범하여 변수간의 충돌을 일으킬 위험성이 증가했다. 이를 해결하기 위해, JS의 즉시호출함수(IIFE) 기능을 이용한 CommonJS, AM.. 2021. 6. 25. 6. webpack - babel 설정 1. 설치 터미널 입력: npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime 2. .babelrc.js 파일 생성 파일명이 마침표로 시작하는 것을 확인하자 → .babelrc.js 다음 코드와 같이 작성하자. module.exports = { presets: ['@babel/preset-env'], plugins: [ ['@babel/plugin-transform-runtime'] ] } - bable preset: 바벨의 자바스크립트 지원 패키지 - babel plugin: 바벨의 비동기 처리를 지원하는 패키지 3. webpack.config.js 파일에 설정 추가 모듈 부분에 다음과 같이 작성하자. module: { rules.. 2021. 5. 6. 5. webpack - vendor prefixer / auto-prefixer(Post CSS) 0. 개념 vendor prefixer 또는 공급업체 접두사라고 불린다. 개발을 하다보면 아직 웹 표준이 되지 않은 CSS3의 최신 또는 실험 기능을 사용하는 경우가 생긴다. 이때, 최신버전의 브라우저는 해당 기능을 소화할 수 있을 수도 있지만 구버전의 브라우저는 해당 기능을 소화하지 못하기 마련이다. 이러한 호환성 문제를 해결하기 위해 사용하는 것이 vendor prefixer 또는 auto-prefixer 라고 한다. 1. main.scss 파일 내용 수정 아래의 코드처럼 flex 요소를 추가해준다. $color--black: #000; $color--white: #fff; body { background-color: $color--black; h1 { color: $color--white; font.. 2021. 5. 6. 4. webpack - SCSS 적용하기 1. 확장자 변경 이전 포스팅에서 만들었던 CSS 폴더와 파일을 SCSS로 변경해준다. 파일의 경우 확장자만 변경해주면 된다. 기존의 main.js에 설정해놓은 CSS 파일의 경로도 수정해준다. 기존에 설정해놓은 webpack.config.js의 경로도 수정해준다. 2. scss 패키지 설치 자바스크립트(webpack.config.js)에서 CSS를 읽고 적용할 수 있도록 style-loader와 css-loader를 설치하였다. 이번에는 SCSS를 읽고 적용할 수 있도록, 필요한 패키지를 설치하고 적용해보자. 터미널 입력: npm i -D sass-loader sass 설치 후 webpack.config.js에 패키지 설정을 추가한다. 3. scss 작성하기 main.scss에 다음과 같은 코드를 작성.. 2021. 5. 6. 3. webpack - 모듈 설정(CSS 연결) 1. 모듈 사용 방법 - 아래의 작업을 진행하면, index.html에서 link태그를 이용해 설정해놓은 css 연결부분을 삭제해야한다. a) main.js 파일을 이용한 CSS 파일 연결 이전 포스팅에서 static 폴더에 생성하면 static부분의 경로를 생략하고 dist에서 읽어드릴 경로로 작성했다. 이번에는 static 폴더를 사용하지 않고 main.js 파일을 이용하여 파일을 연동하는 방법을 배울 것이다. 먼저, 루트 경로에 css 폴더를 만들고 그 안에 main.css라는 파일을 만들자. main.css 에는 body 태그의 배경색을 변경하는 내용을 적었다. 그리고 main.js 파일에서 main.css 파일을 import 해준다. - webpack.config.js 파일 안에서 entry 지.. 2021. 5. 5. 2. webpack - index.html 연결하기 1. 개발서버를 이용한 index.html 확인하기 a) 웹팩 플러그인 설치 터미널 입력: npm i -D html-webpack-plugin b) webpack.config.js 설정 webpack 플러그인 import 하기 output 부분에 플러그인 사용을 위한 구성요소(plugins, devServer) 추가하기 // import const path = require('path') // node 모듈을 import 해오는 기본방법 const HtmlPlugin = require('html-webpack-plugin') // webpack plugin 모듈 가져오기 // export module.exports = { // 파일을 읽어들이기 시작하는 진입점 설정 entry: './js/main.js'.. 2021. 5. 5. 1. webpack 시작하기 0. webpack 이란 무엇인가? webpack은 Bundler의 한 종류이다. 번들러를 왜 사용하는지 알아보자. 프론트 개발을 하다보면 리액트, 뷰, 앵귤러 등 다양한 프레임워크를 사용한다. 프레임워크에 따라 HTML, CSS, JS를 프레임워크만의 형식으로 작성하게 된다. 화면을 출력하기 위해서는 브라우저가 프레임워크 형식으로 작성된 파일을 컴파일해야 하는데, 이 과정이 오래 걸린다. 번들러는 브라우저가 빠르게 컴파일 할 수 있도록, 프레임워크 형식으로 작성된 파일을 HTML, CSS, JS 파일로 분리하는 역할이다. [ 참고자료 ] velog.io/@eastshine94/Bundler-왜-Bundler을-사용해야하는가 [Bundler] 왜 Bundler을 사용해야하는가? Bundler > 참고 자.. 2021. 5. 4. 이전 1 다음
