본문 바로가기

webpack3

Webpack) 잡다한 지식들 웹팩을 공부하면서 알게된 잡다한 지식들 정리하는 포스트 목차 scripts Command & Flags 빌드 파일 실행하는 방법 scripts // package.json "scripts": { "start": "webpack serve --config webpack/webpack.config.js --env env=dev" } serve // webpack-dev-server를 실행하는 커맨드. --config // webpack 설정 파일의 경로를 제공하는 플래그. -c도 동일한 기능. (예: -c ./webpack.config.js) --env // 함수일 때 설정에 전달된 환경 플래그. (위의 코드 설명: 함수일 때 환경 플래그를 사용하여 설정에 env라는 프로퍼티로 dev를 전달) webpack.. 2021. 8. 26.
Webpack) Asset Modules Asset Modules 웹 애플리케이션을 제작하면서 HTML, CSS, JS와 더불어 아이콘, 사진, 비디오 등 다양한 Asset을 추가하게 된다. Asset Modules은 로더를 추가하지 않아도 이러한 asset 파일들을 사용할 수 있도록 도와주는 모듈이다. 쉽게 말해서 Asset Modules는 Asset 파일들을 처리하는 방식들을 모아놓은 모듈이고, 정의하는 방식에 따라 브라우저가 한 번에 다운로드하는 파일의 개수, 파일의 용량을 결정한다. Asset Modules의 종류로는 총 4가지, asset/resource, asset/inline, asset/source, asset이 있다. 목차 asset/resource asset/inline asset/source asset asset/resour.. 2021. 8. 25.
React + Typescript + Webpack + Babel + ESLint + Prettier + Husky + Emotion 프로젝트 boilerplate 기준은 깃허브에서 새로운 repository를 만들고, 로컬로 clone한 상태에서 시작하는 것을 기준으로 한다. (README.md 파일만 있다고 가정한다) 목차 기본 폴더 및 파일 세팅 React, Typescript Babel, Webpack ESLint, Prettier Husky, Lint-staged Emotion 기본 폴더 및 파일 세팅 다음과 같이 폴더와 파일을 추가한다. public/index.html .gitignore build node_modules yarn-error.logpackage.json { "name": "dutch-dutch", "version": "0.0.1", "description": "dutch-dutch is dutch treat .. 2021. 8. 24.

티스토리툴바