Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

webpack을 local, dev, prod로 분리한다. #866

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

webpack을 local, dev, prod로 분리한다. #866

wants to merge 3 commits into from

Conversation

hwangstar156
Copy link
Collaborator

@hwangstar156 hwangstar156 commented Oct 23, 2022 •
edited

close #865

Ci에서 ts-loader가 문제 생기는 것을 webpack.local.js를 이용하여 해결

공통

  • runtimeChunk를 이용하여 리빌드 속도 최적화
  • babel-loader와 babel-loader의 캐싱 적용

local

  • mode: development
  • eval-cheap-module-source-map을 이용한 rebuild 속도 최적화
  • forkTsCheckerWebpackPlugin을 이용하여 바벨로더에서도 타입체킹이 가능하게 하며 별도의 프로세스에서 타입을 체크할 수 있도록 변경

dev

  • mode: production
  • 테스트 배포용 서버이기떄문에 굳이 minimize의 필요가 없을것 같아 optimization: minimize: false로 설정
  • webpack persisten cache를 이용하여 리빌드 속도 최적화

prod

  • mode: production
  • webpack persisten cache를 이용하여 리빌드 속도 최적화

@hwangstar156 hwangstar156 added 🌈 frontend 프론트엔드 이슈 💫 feat 기능 구현 이슈 🗃 infra 인프라 이슈 labels Oct 23, 2022
@hwangstar156 hwangstar156 self-assigned this Oct 23, 2022
@hwangstar156 hwangstar156 changed the title 타입 체킹을 자동화 한다. webpack을 local, dev, prod로 분리한다. Oct 24, 2022
liswktjs
liswktjs requested changes Oct 27, 2022
View reviewed changes
Copy link
Collaborator

@liswktjs liswktjs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

몇 가지 의문점에 대해서 코멘트 남겼습니다 확인해보시고 답변 달아주세요

frontend/webpack/webpack.local.js
],
},
plugins: [
new ForkTsCheckerWebpackPlugin(),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

loader를 ts-loader로 설정하지 않아도 해당 플러그인이 작동하나요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 문제없이 동작합니다.

frontend/webpack/webpack.local.js
rules: [
{
test: /\.(js|jsx|ts|tsx)?$/,
loader: 'babel-loader',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

local 환경에서만 작동한다면, 해당 경우 ts-loader를 적용하여도 문제 없지 않을까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ts-loader를 이용할시 emotion의 css-props를 못쓰기 때문에 ui가 깨지기 때문에 babel-loader를 이용하였습니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@liswktjs liswktjs liswktjs requested changes

Requested changes must be addressed to merge this pull request.

Assignees

@hwangstar156 hwangstar156

Labels
💫 feat 기능 구현 이슈 🌈 frontend 프론트엔드 이슈 🗃 infra 인프라 이슈
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

타입체크를 자동화 한다.
2 participants
@hwangstar156 @liswktjs