Bundler (13) 썸네일형 리스트형 [Webpack] babel + Typescript 구성하기 Why Babel + Typescript? 타입스크립트 자체로 tsc(타입스크립트 컴파일러)가 있는데, 왜 babel과 연계해서 사용해야하지? 맞습니다. TS 또한 Babel마냥, 브라우저 호환을 위한 이전 버전으로의 자바스크립트로 트랜스파일링이 가능합니다. 하지만, Babel을 사용함으로써, 더욱 최적화된 빌드 결과물을 얻을 수 있습니다. 1. 타겟을 명확하게 지정가능함 @babel/preset-env를 이용해, 지원하고자하는 브라우저만 대상으로 지원가능합니다. 심지어 모던 브라우저에는 최신 코드를, 구식 브라우저에는 트랜스파일링 된 코드를 제공할 수 있게 여러 번들링 파일을 생산가능합니다. 2. 브라우저 폴리필 최신 문법을 이전 버전에서도 쓸 수 있도록 폴리필 가능합니다. 3. Tree Shakin.. [Webpack] Babel 설정하기 ( compatibility , polyfill, env etc..) Intro. 프로그래밍 하면서 하위 호환성(Backward Compatibility)라는 단어를 들어 보셨나요? 쉽게 말해, 특정 피쳐가 하위 호환을 지원한다는 뜻은 곧, 하위 버전에서 해당 피쳐를 사용할 수 있다는 뜻입니다. JS로 프로그래밍 할 때도 해당 개념을 신경 써야합니다. 왜냐하면, 스크립트를 실행하는 브라우저가 굉장히 다양하고 또 어떤 브라우저(IE)는 더 이상 업데이트를 안하기 때문이지요. 그래서 최신 피쳐를 사용하려 하니 어떤 브라우저에선 되는데, 어떤 브라우저에선 에러를 던지는 현상을 간간이 보실 수 있습니다. 그리고 이러한 문제는 트랜스파일러(Transpiler)를 이용하여, 최신 코드를 특정 브라우저가 이해할 수 있는 코드로 바꾸는 방법이 있습니다. 이번 글에선, babel이란 트랜.. [Webpack] 동적으로 참조되는 애셋 번들링 하기 (copy-webpack-plugin) Intro. webpack이 애셋을 번들링하는 방식은 기본적으로 정적입니다. 프로그래밍적으로 참조되는 애셋의 경우, 빌드 시, 번들링 되지 않는다는 뜻입니다. 예를들어 볼까요? //index.js function init(){ const newContent = `` document.innerHTML += newContent; } init() 위 코드를 웹팩으로 빌드 하였을때, 어떻게 될까요? frog1.jpg 만 참조되어 빌드됩니다. 위와 같이 동적으로 참조하는 방식은 꽤 흔한데 말이죠. 따라서 이번 글에선, 위와 같은 문제를 해결하는 방법에 대해 써보려합니다. Goal Method 1. copy-webpack-plugin을 설치합니다. yarn add -D copy-webpack-plugin 2. .. [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] 전처리기 사용하기 + 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 경로 하위에 빌드 }) ] 이전 1 2 다음
