# webpack
2021.12.2 TIL
0.Webpack개념 1.Webpack등장배경 2.Webpack사용이유 3.Webpack-cli란? 4.Webpack의 Loader란?
[webpack] basic react webpack babel 설정
기본적인 React Webpack Babel 설정을 연습, 기록한다.프로젝트의 메타 정보를 관리할 pakage.json 파일을 프로젝트 루트에 생성한다.Webpack 개발 서버 환경을 구성하기 위한 의존 패키지를 설치한다.개발 서버에서만 사용할 것이므로 -D 속성을 붙
[React] npm start, webpack 버전 에러
npx Creat-react-app으로 환경 설정을 하고 새로 프로젝트를 생성하는 과정에서 다음과 같은 에러를 마주했다. 확인 결과, 외부 webpack의 버전이 creat-react-app에서 요구되는 버전과 일치하지 않아서 발생한 에러였다.
[Webpack] 렌더링된 image url이 base64로 나올때
scss 소스 상에서는 상대경로로 작성한 이미지파일 경로가 개발자도구에서는 base64로 나오는 상황webpack.config.js 파일에서 limit을 수정해줘야 한다. limit 보다 작은 파일은 base64로 변환하고 큰 파일은 그대로 보여주기 때문!
[webpack] favicon 설정
webpack config로 html-webpack-plugin을 사용하면서 favicon을 로드할 수 있는 방법에 관하여 알아보았다favicon 만드는 방법html-webpack-plugin을 활용하여 설정하는 방법html-loader 활용하여 설정하는 방법포토샵,
Webpack 기초 간단 정리✨ - 응용편
이번에는 지난 번에 작성한 바닐라 자바스크립트 코드를 리액트 기반의 코드로 바꿔볼 예정이다!😙 그럼 바로 시작해보자🔥
웹팩 환경에서 React Router 새로고침 했을 때 404에러 해결하는 방법
webpack.config.js에 historyApiFallback:true를 추가해준다
[Webpack] 웹팩 환경에서 이미지 로드하기
file-loader설치npm i file-loaderwebpack.config.js에 새로운 rule을 추가 해준다.
jsx를 읽을 수 없는 문제
문제 원인 : module의 rule을 잘못 설정하였음module의 rules의 test부문이 js -> js|jsx 이어야 함
[Webpack] 웹팩으로 리액트 개발환경 셋팅하기
1. 개발환경 초기화 > npm init package.json 파일이 생성된다. 2. 리액트 설치 > npm install react react-dom 3. 웹팩 설치 > npm i -D webpack webpack-cli -D : 개발용으로만 웹팩을 사
webpack.config.js 를 ESM 방식으로 바꾸어 dev server를 구축하기
webpack.config.js는 ESM모듈로 충분히 변경할 수 있다.
webpack, babel을 이용한 프로젝트 설정
매번 필요할 때마다, 궁금할 때마다 설정들을 가져와 사용만 하다 이번 기회에 저만의 프로젝트 webpack, babel 설정을 정리했습니다.webpack, babel 공식 문서를 참고해 작성했습니다.개발, 배포용에서 함께 사용할 수 있는 webpack 설정입니다.첫 시
React | 코드 스플리팅 (+webpack / build)
리액트 프로젝트 완성 후 → 사용자에게 제공 시, 빌드 작업 거쳐 배포파일 크기 최소화 js 파일 내부의 불필요한 주석, 경고 메세지, 공백 등 → 제거 코드 트랜스파일 작업 브라우저에서 JSX 문법 or 다른 최신 js 문법 → 원활한 실행 되도록 정적 파일(
webpack + babel
모듈단위의 js들을 모아서 하나의 app.js로 번들링해주는 기능 크로스브라우징을 위해 es6문법으로 작성된 js를 es5로 변환해주는 기능루트폴더에 npm init을 해준다.\*이때 폴더에 package.json파일이 생겨남웹팩과 바벨을 설치해준다 \*웹팩 바벨은 개
