# Webpack5

soohyun4747

storybook을 실행하다가 아래와 같은 오류를 마주했다. webpack5 부터는 더이상 node.js를 위한 polyfills를 기본으로 제공하지 않는단다. 하지만, 사용하고 있는 모듈에서 crypto를 활용하기 때문에 에러가 발생한다. > polyfills란 무엇인가? polyfills는 오래된 브라우저에서 지원하지 않는 현대 자바스크립트 기능이 작동될 수 있도록 도와주는 코드이다. 또한, 크롬이랑 익스플로러 등 다양한 브라우저들이 존재하는데 브라우저마다 작동될 수 있는 기능들이 다르다. 그렇기 때문에 polyfills가 특정 브라우저에서 지원되지 않는 기능들을 매꿔주는 역할을 한다. > 왜 webpack 5 부터는 더 이상 polyfills를 포함하고 있지

designc

프론트엔드 개발자라면 언젠가는 꼭 거쳐야 할 번들러에 대한 공부를 시작했다. 가장 널리 알려진 webpack5 를 기반으로 무작정 실습해 봤다. 연말에 우연찮게 재택근무를 하게되어, 퇴근 후 시간이 조금 넉넉해졌기에 조금 여유롭게 공부했고, 이해한 대로 한번 기술해 보고자 한다. 번들링과 모듈은 무엇이고, 왜 해야 하는가? 그럼 웹팩은 무엇인가? 그래서 웹팩은 어떻게 사용하는건가? 웹팩의 대체재는 무엇인가? 번들링과 모듈은 무엇이고, 왜 해야 하는가? 번들링 번들링은 묶음 이라는 뜻이고, 말 그대로 파일을 하나로 묶는 행위라고 할

husbumps

타입스크립트 보일러플레이트 바로가기 > https://github.com/sangbeomheo/typescript-boilerplate > 1탄: 웹팩의 기본적인 로더와 플러그인을 적용해 개발/배포 환경에 맞게 빌드해보기 (webpack5, loader, plugin, asset modules) 보일러플레이트를 만들게 된 이유 팀 단위 또는 개인 단위의 프로젝트들을 경험하다 보니 '보일러 플레이트'를 만들어야겠다고 결심했습니다. 지금까지 리액트 프로젝트는 CRA를 사용하거나 여러 블로그를 복붙해서 환경설정을 하는 경우가 대부분이었습니다. 그러다 보니 프로젝트가 점점 커질수록 확실하게 알지 못하는 환경설정들이 프로젝트의 확장과 변경에 어려움을 줬습니다. 더 이상 블로그에서 복사해 붙이는 거로 해결되지 않는 문제들도 생겼습니다. 그래서 이번엔 환경설정을 처음부터 직접 해보면서 모르는 부분을 학습하고 제가 직접 어느

jihyeonjeong11

NextJS에 Storybook을 추가해서 개발환경을 완성한 과정을 기록하기로 했다. https://storybook.js.org/blog/get-started-with-storybook-and-next-js/ 스토리북의 추가에 대해서는 해당 공식 docs를 참고했다. Next.js v11 and later use Webpack 5. We can also use Webpack 5 in Storybook to get improved integration and performance. To do that we use the builder option and run this command: 의 내용을 참고하면, Next의 v11버전은 Webpack5를 사용한다고 하니, 굉장히 쉽게 설치할 수 있었다. 의 명령으로 storybook의 기본 세팅을 마칠수 있었고 유의해야 할 점은 이 두 부분에 변화를 줘서 public 폴더에 추가될 static 이미지를 스토리북이 가

maliethy

webpack 설정을 위해 찾아본 내용들을 정리하고자 한다. 1. webpack-dev-server 설정하기 devServer의 번들된 결과물은 일반 webpack 명령어와는 다르게 메모리에 저장된다. 따라서 개발 서버를 종료하면 결과물도 사라진다. 출처: 웹팩 데브 서버(webpack-dev-server) 3버전(feat. proxy) webpack devserver 옵션 중 static 설정은 정적파일을 제공하는 경우 필요한 경로이다. 출처: Webpack 공식문서-devserver.static 나의 경우 html파일들과 js, css, img 폴더에 있는 모든 파일들이 정적파일들이므로 다음과 같이 'di