webpack10 7. webpack에 대한 이해(사용목적, 기본개념) - Vue 프로젝트 클론코딩을 완료한 이후, Vue와 webpack에 대한 기본적인 개념적 이해가 궁금했다. - 그러므로 본 포스팅에서 webpack을 왜 사용하는지와 webpack의 기본구조에 대한 이야기를 해보려고 한다. 1. webpack을 사용하는 이유 프론트 개발의 영역이 넓어지면서 JavaScript를 이용한 다양한 기술적 풀이가 생겨났다. 하나의 웹 페이지에 연결된 JS파일이 많아지면서 관리에 있어 한계가 발생했고, 웹사이트의 로딩속도가 길어지고 그만큼 더 많은 요청이 발생하여 네트워크 비용이 증가했다. 더불어, JS파일이 많아지면서 서로의 scope를 침범하여 변수간의 충돌을 일으킬 위험성이 증가했다. 이를 해결하기 위해, JS의 즉시호출함수(IIFE) 기능을 이용한 CommonJS, AM.. 2021. 6. 25. 36. Vue - 컴포넌트 전역 스타일 1. Sass loader 일반적으로 부트스트랩을 사용하게 되면 사용하는 컴포넌트의 script 태그에 매번 @import 키워드를 통하여 부트스트랩을 가져오게 된다. 하지만, 이러한 방식은 코드를 반복적으로 사용하게 되어 코드의 효율이 떨어지게 된다. 계속해서 컴포넌트를 로드할 때마다 해당 부트스트랩 파일을 읽어야 하기 때문이다. 그렇다면 한번에 스타일을 읽어올 수 있다면 더 효율적이지 않을까? 그러한 방법은 없을까? 이를 해결해주는 오픈소스가 Sass-loader 이다. 2. 설치 https://github.com/webpack-contrib/sass-loader webpack-contrib/sass-loader Compiles Sass to CSS. Contribute to webpack-contr.. 2021. 6. 21. 3. Vue - 이미지 파일 연결 및 경로 별칭 설정 1. 파일 확장자 생략을 위한 설정 webpack.config.js 파일에서 위의 사진과 같이 resolve 속성에 extensions를 설정한다. js와 vue 파일을 import하거나 링크하는 경우, 확장자를 따로 명시하지 않아도 동작하도록 해주는 설정이다. 이 외에도 다른 확장자 이름을 등록하면 해당 확장자 없이 파일을 연결할 수 있다. 해당 설정을 마치면 아래와 같이 확장자명을 기입하지 않고 사용할 수 있다. 2. 이미지 연결 및 경로별칭 설정 src폴더 내부에 components 라는 폴더를 생성한다. 기존에 static 폴더에 있던 images 폴더를 src 폴더 내부로 옮긴다. 기존의 images 폴더의 이름을 assets로 변경한다. HelloWorld.vue에 다음과 같이 작성한다. 이 .. 2021. 5. 12. 2. Vue - webpack을 이용한 프로젝트 생성 0. 시작하기 전에 - webpack 포스팅에서 생성한 프로젝트를 기반으로 Vue 프로젝트를 만들 예정입니다. - 필요하신 분은 아래에 있는 제 github 주소를 사용하여 해당 프로젝트를 사용하셔도 됩니다. github.com/akaRaphael/webpack-basic.git akaRaphael/webpack-basic basic webpack project. Contribute to akaRaphael/webpack-basic development by creating an account on GitHub. github.com 1. webpack 프로젝트 가져오기 터미널 입력: npx degit github.com/akaRaphael/webpack-basic.git 원하는프로젝트이름 해당 명령어는 .. 2021. 5. 11. 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 2 다음
