개발자 모드에서create-react-app로 만든 프로젝트를build로 어떻게 진행합니까?

추기 (2018/12/28)
이런 작업은 Yarneject 이후에 해야 돼요.
일반적으로create-react-app에서 만든 프로젝트를 구축하면 압축된 원본 파일을 출력하기 때문에 출력 파일을 확인하기가 좀 불편합니다
package.json에서 불리는react-scripts의 동작을 추적해보며 더듬어보면
*/node입니다.module/react-scripts/의 구성

.bin → 今回は無視でOK
bin → react-scriptsコマンドを受け付けた際にまず実行されるスクリプト
config → 環境定義、パス、webpack.config.jsなどの定義
lib → 今回は無視でOK
LICENSE → 今回は無視でOK
node_modules → 今回は無視でOK
package.json → 今回は無視でOK
README.md → 今回は無視でOK
scripts → オプションで指定されたstartやbuildに対して実行する内容
template → 今回は無視でOK
template-typescript → 今回は無視でOK

이번에는 가능한 한 비파괴적인 방식으로 개발자 빌딩을 추가할 것이다

create-react-app에서 제작한 프로젝트(※ 이후 React 프로젝트로)의 패키지.json에 dev 명령 추가하기
또한 */는 React 항목의 루트 디렉토리라는 뜻으로 기재되어 있으므로 각 환경 대신 읽어 주십시오.
package.json

  "scripts": {
    "build": "react-scripts build",
+   "dev": "react-scripts dev",
  }

우선 이 명령을 사용합니다
*/node_modules/react-scripts/bin/react-scripts.js
dev 옵션 허용
react-scripts.js

const scriptIndex = args.findIndex(
-  x => x === 'build' || x === 'eject' || x === 'start' || x === 'test'
+  x => x === 'build' || x === 'dev' || x === 'eject' || x === 'start' || x === 'test'
);
…略…
switch (script) {
  case 'build':
+ case 'dev':
  case 'eject':
  case 'start':

이것이 바로 react-scripts입니다.js가 dev 옵션을 받아들였기 때문에 스크립트를 실행할 준비를 합니다
아무튼 */nodemodule/react-scripts/scripts/내build.js 복사
같은 곳에서 dev.js로 설정
React 항목의 맨 위에

$ yarn dev
($ npm run devでも可)

이렇게 보면 yarn build을 실행할 때와 같은 출력 결과를 얻었습니다
이렇게 되면 대개 파괴적이지 않은 (경로만 추가) yarndev의 실행 경로가 준비되어 있기 때문에, 실제적으로 개발자의 실행 오류를 어떻게 만들 수 있습니까?
먼저 아까 복사한 dev.js 내용을 볼게요.
dev.js

process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';

그래서 이거를 먼저.
dev.js

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

그리고 yarn dev로 바꿔보도록 하겠습니다.
*/node_modules/react-scripts/config/webpack.config.prod.js에 다음과 같은 예외가 발표되었다
throw new Error('Production builds must have NODE_ENV=production.');
여기서 프로세싱을 하나 봐요.env.NODE_ENV는'production'을 제외하고는 인정하지 않습니다. throw가 이if문장을 침묵시키면 결과는production이 구축한 결과와 같기 때문에 의미가 없습니다.
거기는 원래 웹 페이지야.config.prod.js를 참고하는 것 자체가 이상해서 참고서를 바꿨어요.
dev.js

-const config = require('../config/webpack.config.prod');
+const config = require('../config/webpack.config.dev');

다시 yarn dev 를 실행하면 다음 오류가 발생합니다: 파일이 없습니다.
ENOENT: no such file or directory, open '*/build/static/js/main.chunk.js'
*/build/안에 마인이 있는 걸 봤어요.chunk.js라는 파일이 없습니다.
진정하고 React 프로젝트의 현재 디렉터리를 보십시오
*/dist/디렉터리를 생성했습니다. 원하는 개발자 구축 결과를 넣었습니다.
그럼 위의 실수는 뭘까...
/dist/에서 출력된 파일의 크기를 찾으면 파일이 없습니다.
웹 패키지는 기본적으로 구축 결과를 */dist/로 출력하기 때문이다
webpack.config.prod.js에 그걸 지정한 기록이 있을 텐데...
그러니까 홈페이지.config.prod.js 및 webpackconfig.dev.js를 비교하는 곳.
출력 대상은 다음과 같습니다.
webpack.config.prod.js

module.exports = {
  output: {
    // The build folder.
    path: paths.appBuild,
  }
}

거기서 웹팩을 파괴하지 않기 위해서config.dev.js 웹 페이지를 복사합니다.config.dev2.js로
scriptts/dev.js에서도 다음과 같이 dev2를 참고합니다
dev.js

-const config = require('../config/webpack.config.dev');
+const config = require('../config/webpack.config.dev2');

webpack.config.dev2.js에 상기 설정 추가
webpack.config.dev2.js

module.exports = {
  output: {
+   // The build folder.
+   path: paths.appBuild,
  }
}

이렇게 해서 Yarn dev를 수행하면...
구축이 올바르게 완료되었습니다.
현재 디렉터리를build로 이동해 보십시오

$ cd build
$ http-server
（ない場合$ yarn global add http-serverなどで追加）

실행을 해보면 다음과 같이 정확함을 나타낼 수 있으니까요.

출력이 완전히 일치하지 않았어요.
*/build/static/css
개발자 모드 구축에서 몇 개의 파일이 드물기 때문에 더 조사해야 할 것 같습니다!?

총결산

・ yarn dev 실행을 위한 경로 준비
・web pack.config.dev.js의 웹 페이지 복사.config.dev2.js에서 paths.apppBuild 추기 및 dev.js 측 참조
· 출력 내용 확인 & 서버 확인
뭐가 부족한가?(조사 필요)
즉