웹 팩 빌드 vs 리액트 스크립트 빌드
webpack 구성은 다음과 같습니다.
{
entry: path.join(__dirname, 'src', 'index.js'),
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
이제 빌드는webpack
이
react-module 빌드에서 빌드(static에는 별도의 폴더에 css, js 및 미디어가 포함됩니다)
질문:리액트 스크립트 구축에 비해 웹 팩의 특별한 장점이 있습니까?(퍼포먼스에 한정되지 않고 포함)
메모: 패키지.이를 위해 json이 편집되었습니다.
Webpack은 범용 번들러로, React 이외의 어플리케이션을 갖추고 있습니다.전에create-react-app
웹은 웹 팩을 번들러로 사용하는 완전히 새로운 React 프로젝트를 설정하는 예시로 가득했습니다.매우 유연하며 React 어플리케이션에서 필요로 하는 것 이상을 처리할 수 있습니다.Angular, Vue, NodeJS 및 Web Assembly에서도 사용할 수 있습니다.
하지만 예전에는 셋업하는 데 시간이 좀 걸렸어요.React+를 변환할 수 있도록 기능을 이해하고 구성해야 합니다.ES6 코드를 플랜 배닐라 JS에 넣습니다.원하는 출력 구조를 결정하고 웹 팩을 구성해야 합니다.또한 핫 모듈 새로고침 및 코드 분할 지원도 직접 추가할 수 있습니다.이 때 위의 모든 것을 지원하기 위해 Webpack에 필요한 다른 플러그인도 추가해야 합니다. : ).
이것은 자연스럽게 리액트를 시작한 사람들에게 약간의 피로를 야기했다.
그래서 facebook은 웹 팩을 내부적으로 사용하는 cra를 만들었습니다.이러한 기본 사항을 처리하고 코드의 리액트 부분에 집중할 수 있도록 사전에 구성된 툴이 모두 포함되어 있습니다.웹 팩을 최대한 숨깁니다.그렇지 않으면 사용자가 구성을 변경하면 빌드 프로세스가 중단될 수 있습니다.
이와는 별도로 가 사용하는 구조 규약은 베어본 웹 팩 설정에 대해 성능에 영향을 미치지 않아야 합니다.그냥 관례일 뿐이야
그런 다음 언제 create-react-app을 사용할지, 언제 Webpack을 사용할지 질문해야 합니다.
초보자라면 리액션 앱에 초점을 맞추면서 cra를 사용하는 것이 좋을지도 모릅니다.최종적으로 후드에서 관리하고 있는 WebPack Configuration cra에 의해 지원되지 않는 경우가 발생할 수 있습니다.가장 일반적인 예는 다른 앱에서 재사용할 구성 요소 라이브러리를 작성하려는 경우입니다.이것은 cra로 할 수 없습니다(앱 전체에 관한 것입니다).그런 다음 웹 팩으로 전환하여 학습을 시작할 수 있습니다.
웹 팩.은 더 , 더 깨끗해진다는 이다.create-react-app
정기적으로 업데이트되며 React, Webpack 및 Babel을 통해 쉽게 최신 상태를 유지할 수 있습니다.커뮤니티는 자동으로 문제를 수정합니다.
퍼포먼스 면에서는 리액트스크립트 또는 웹팩에 관계없이 동일해야 합니다.
웹 팩만 실행하면 다음과 같은 이점이 있습니다.
고객의 환경을 완전히 제어
실시할 수 도, 「서버측 렌더링」을 할 수 ).
create-react-app
기술로서의 웹 팩에 대한 지식
웹 팩만의 단점
웹 팩의 풀차지 업데이트 및 유지 보수(일부 웹 팩 버전은 하위 호환성이 없거나 향후 호환성이 없음)
만약 당신이 빠르게 반응하는 것을 배우려고 노력한다면 그것은 위협적일 수 있고 골칫거리가 될 수 있다.
「 」를 커스터마이즈 create-react-app
몇 정보가 있습니다.
https://auth0.com/blog/how-to-configure-create-react-app/
측 입니다.create-react-app
https://hackernoon.com/server-side-rendering-with-create-react-app-1faf5a9d1eff
TLDR 사용: " "create-react-app
react-scripts
로든 가능한 한
후드 밑을 만지작거리고 싶다면 웹팩만 사용하세요.
언급URL : https://stackoverflow.com/questions/52177318/webpack-build-vs-react-scripts-build
'programing' 카테고리의 다른 글
동적 키를 사용하여 개체의 인터페이스를 정의하려면 어떻게 해야 합니까? (0) | 2023.03.16 |
---|---|
AngularJs ng클릭으로 다른 페이지로 이동(Ionic 프레임워크 사용) (0) | 2023.03.16 |
이벤트 핸들러의 React 구성 요소에 대한 참조 가져오기 (0) | 2023.03.16 |
심플하고 안전한 API 인증 시스템 (0) | 2023.03.16 |
Spring 4.1까지 사용 중인 Jackson Object Mapper를 입수하려면 어떻게 해야 합니까? (0) | 2023.03.16 |