webpack

bun init bun project 생성 디렉터리 모습 필요한 패키지 > 패키지 설명 > 1. webpack, webpack-cli = webpack과 webpack을 cli환경에서 사용할 수 있게 해줌 > 2. webpack-dev-server = 라이브 리

웹팩 기본 설정웹팩 기본 설정 코드 보기src 폴더에 styles 폴더를 만들고, index.css 만들기스타일이 적용이 되는지 확인하기 위해 background-color 속성을 추가 해 준다.이후 index.ts 파일에 직접 import를 해 준뒤에 bun run

이후 bun webpack 을 실행하게 되면, Module parse failed: The keyword 'interface' is reserved 오류가 나게 된다babel과 babel 프리셋으로 해결해 보자,패키지 설치웹팩 설정기존에 작성했던 config 에서 mo

웹팩 도큐먼트여기서 imagemin 만 추가해서 사용할 예정이다. 웹팩이 이미지를 로딩할 수 없기 때문에 webpack asset 을 먼저 작성bun run build 를 해 주면, 오류 없이 번들링이 잘 되는 모습을 볼 수 있다.이제 이미지 사이즈를 줄이기 위헤 관

bun 환경에서 image를 minimize 할 때 생긴 문제로 node 환경으로 migration 한 뒤에 이전에 포스팅 했던 기본적인 웹팩 설정들을 했다.yarn inittypescript 패키지 설치yarn add -D typescript ts-node @type

이전까지 작성했던 코드로 build 를 실행하면, webpack에서 asset 사이즈가 크다는 warning을 띄운다. 이미지 사이즈가 크면, 앱이 느려질 수 있기 때문에 이를 해결해 보자. 앱에 이미지를 임포트하는 방법 세 가지 앱에 이미지를 임포트하는 방법에는

cjs에서 esm으로 전환 bundle-analyzer 적용 lazy-loading 적용