본문 바로가기

전체 글

 (68)
[Webpack + opt] 이미지 파일들 webp로 변환하기 (imagemin-webp) Intro. webp파일은 동일 jpeg 파일 대비 약 30% , png파일 대비 약 65%정도 작습니다. 즉, 애셋으로 사용할 시, 로딩 타임에 대해 더 높은 퍼포먼스를 기대할 수 있습니다. 저 같은 경우, 웹팩 단에서 정적인 이미지들에 한하여 변환해주는 플러그인이 있는지 몰라, 그동안 일일이 파일 하나하나씩 변환해가며 사용했는데, 굉장히 유용하게 사용할 것 같습니다. Image-minimizer-webpack-plugin을 베이스로 사용할거라, 만약 해당 플러그인 설정에 대해 잘 모르신다면, 아래글을 참고해 주세요 https://dev-dovi.tistory.com/36 [Webpack + Opt] 이미지 애셋 압축하기 (image-minimizer-webpack-plugin) Intro. load ..
[Webpack + Opt] 이미지 애셋 압축하기 (image-minimizer-webpack-plugin) Intro. load time 최적화를 달성하기 위해, 당연하지만 파일의 사이즈는 작을 수록 더 좋은 퍼포먼스를 보입니다. 그렇기에 image-minimizer-webpack-plugin 플러그인 패키지를 통해 빌드 시, 애셋을 압축할 수 있는 방법을 소개해보려합니다.. ( image-webpack-loader가 더이상 업데이트를 안한다고 하네요. ) Goal Method 해당 플러그인은 imagemin , squoosh , sharp , svgo 이렇게 4가지를 압축 알고리즘으로 추천하고 있고 별도로 커스텀 압축 알고리즘을 사용해도 되나, 이번 글에선 imagemin을 통해 구성해보겠습니다. 각 애셋별 압축 알고리즘 png : pngquant jpg,jpeg : mozjpeg svg : svgo 를..
[Webpack + opt] css 최적화 Intro. 배포 환경에선 당연히 더 나은 UX를 위해 번들 사이즈를 줄여야합니다. 이번 글에선 webpack 번들링 과정에서 css 파일들을 어떤식으로 최적화 할 수 있을지 이야기 해보겠습니다. Index 1. CSS 압축 2. 코멘트 제거 3. 안쓰는 CSS 제거 이렇게 크게 3가지 방법이 있습니다. Method CSS 압축 & comment 제거 1. CSSMinimizerPlugin을 설치합니다. 해당 플러그인은 기본적으로 CSS Nano 와 동작방식이 같습니다. yarn add -D css-minimizer-webpack-plugin 2. config파일 내, optimization 객체에 해당 플러그인을 추가합니다. module.exports = merge(common, { ..., optim..
[Webpack] 전처리기 사용하기 + vendor prefix ( scss, less ,postCSS ) Intro. 프론트엔드 개발할 때, 아마 대부분 순수 css만으로 개발하진 않을거라 생각합니다. react ,vue etc.. 같은 프레임워크들은 CSS-in-JS를 지원하고, 또 scss와 같은 전처리를 통해 상당히 쉽게 스타일링을 진행할 수 있습니다. CSS-in-JS의 경우, 이번 글에선 크게 다룰게 없는게, 애당초 자바스크립트 런타임단에서 실행되기에, 사실 웹팩에서 직접적으로 관련 모듈 조작을 통해 최적화 하긴 어렵습니다. ( code splitting , lazy loading으로 가능하긴함) 따라서 이번 글에선 전처기 위주 셋팅에 관해 글을 써보겠습니다. Goal 1. 웹팩에 less 모듈 번들링 가능하게 하기 2. 웹팩에 scss 모듈 번들링 가능하게 하기 3. 웹팩에 vendor pref..
[Webpack] CSS Module 번들링 Intro. CSS는 기본적으로 전역 속성이기에, 조금만 프로젝트 규모가 커져도 css 식별자 충돌이 자주 발생합니다. 그렇기에 CSS 모듈이란 개념이 탄생하였는데요, 이름 스코프를 로컬하게 쓸 수 있게 해주는 기술입니다. 빌드 프로세스 중, 기존 클래스 혹은 애니메이션 이름을 인코딩하는 형태로 목적을 달성합니다. ex) class='myBox' -> class='1b2uib1ui2b3' 다만, css 다루는 방법도 모르는 웹팩한테 다루는 방법을 알려줘야하는 마당에, 당연하지만 css 모듈에 대해서도 어떤식으로 다뤄야하는지 알려줘야합니다. Goal Method 1. 기존의 css 파일을 번들링하는 방식에 css모듈이 걸리므로, 기존 css방식에서 css모듈은 제외시켜줍니다. rules: [{ test:..
[Webpack] 기존 빌드 삭제하기(clean-webpack-plugin) Intro. 각 번들에 해시값을 명시하여 사용할 경우, 매 빌드 혹은 dev server를 통한 live / hot reload기능을 사용할 경우, 굉장히 많은 양의 레거시 파일들이 생성됩니다. 당연하지만 매번 손수 삭제하긴 상당히 귀찮기에, 몇몇 설정을 통해 간단히 해결 가능합니다. Goal Method 1 (내장 모듈 사용하기) 1. config 파일 output에, clean 프로퍼티를 명시합니다. module: { rules: [ { test: /\.html$/, use: [ { loader: 'html-loader' } ] } ] }, output: { path: path.resolve(__dirname, '../dist') clean: true }, clean 프로퍼티에 오브젝트 객체를 할당..
[Webpack] 빌드 시 하위 경로 생성하기 Goal Method output 혹은 각 모듈 플러그인에 대해 filename에 subDir를 명시하면 된다. ex1) JS 번들 module.exports = merge(common, { mode: 'production', output: { filename: 'js/[name].[contenthash:12].js' // 빌드 시, 번들을 js 경로 하위에 빌드 }, ... } ex2) CSS 번들 plugins: [ new MiniCssExtractPlugin({ filename: 'css/styles.css' //빌드 시, css번들을 css 경로 하위에 빌드 }) ]
[Webpack] 동적으로 HTML 생성하기 (HTMLWebpackPlugin) Intro. 번들링 시, 만약 output파일이 여러개로 나눠지거나, 아니면 번들에 해시값을 붙여 사용하는 경우, 매번 직접 HTML파일에 새로 생성되는 파일 이름으로 경로를 고쳐주는것은 상당히 수고스럽습니다. 이러한 문제를 html파일을 동적으로 생성함으로써, 해결할 수 있습니다. Goal Method 1. html-loader , html-webpack-plugin을 설치합니다. yarn add -D html-webpack-plugin html-loader 2. webpack config에 html 모듈을 변환 가능하겠금, html-loader를 적용시킵니다. const path = require('path'); const HtmlWebpackPlugin = require('html-webpack..

티스토리툴바