Webpack 4가 분할 모듈로 취급하는 원시 JSON 파일을 배포하는 방법은 무엇입니까?

존 프리먼

나는 이것이 드문 문제라고 생각하지 않지만 키워드가 많은 오탐을 일으키는 것 같습니다. "webpack 동적 구성 파일", "webpack 런타임로드 JSON 파일"등을 검색해 보았습니다. Webpack을 동적으로 구성한 결과는 많지만 번들 앱을 동적으로 구성한 결과는 많지 않습니다.

  • 내 배포에 원시 JSON으로 배치되는 구성 파일을 갖고 싶습니다. 즉, Webpack 런타임이나 모듈 상용구가 없습니다. 유효한 JSON 파일입니다.

  • 마치 모듈 인 것처럼 내 코드에서 JSON 구성을 "가져 오기"합니다. 예를 들면 다음과 같습니다.

    import config from './config.json'
    
  • Webpack이 번들에서 JSON 파일을 생략하기를 원하지만 config.json서버 에서 대기 를 비동기 적으로 요청하고 주입하기 위해 필요한 코드를 삽입 합니다.

  • Webpack ./config.json이 빌드시 존재 하는지 여부를 무시 하고 런타임시 올바른 위치에있을 것이라고 낙관적으로 가정하기를 원합니다 .

  • './config.json'모듈 별칭을 지정할 수 있고 Webpack이 별칭이 지정된 파일을 config.json빌드 디렉토리 의 올바른 위치 (이름 포함 )에 복사 할 수 있다면 좋겠습니다 .

이렇게하면 내 사이트 관리자가 Webpack을 실행하지 않고도 편집 할 수있는 원시 JSON 파일이 배포에 제공됩니다. config.json일반 모듈 처럼 개발자 코드로 사용할 수 있습니다 . 어떻게 할 수 있습니까? 나는 사용 제안을 보았다

externals: {
  './config.json': "require('./config.prod.json')",
},

하지만 require존재하지 않는 브라우저에서는 작동하지 않습니다.

나는 운 없이이 구성을 시도했습니다. JSON은 여전히 ​​번들에 인라인됩니다.

resolve: {
  alias: {
    './config.json': path.resolve(__dirname, 'src/config.prod.json')
  }
},
optimization: {
  splitChunks: {
    cacheGroups: {
      config: {
        test: './config.json',
        chunks: 'all',
        name: 'config',
        priority: 100
      }
    }
  }
}

Webpack 4를 사용하고 있습니다.

Lukas-Pureke

요컨대, 당신은 사용할 수 없습니다

import config from './config.json'

적어도 이것이 브라우저에서 실행되어야하는 경우는 아닙니다.
webpack 외부 는 nodejs 애플리케이션에서 이것을 가능하게합니다.

당신이 정말로 원하는 것은 정상적인 http 호출입니다. fetch와 같은
것으로 config.json파일을 얻으십시오 .

fetch('url/config.json')

당신은 사용할 수 있습니다 복사 웹팩 - 플러그인 웹팩 컴파일 때 올바른 위치에 설정을 넣어 (하지만 당신이 원하는 않는 변화는 서버에서이 파일을 직접가있는 경우)

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

TOP 리스트

  1. 1

    셀레늄의 모델 대화 상자에서 텍스트를 추출하는 방법은 무엇입니까?

  2. 2

    Webpack 4가 분할 모듈로 취급하는 원시 JSON 파일을 배포하는 방법은 무엇입니까?

  3. 3

    Windows에서 Apache Kafka 오류-주 클래스 QuorumPeerMain을 찾거나로드 할 수 없습니다.

  4. 4

    Zookeeper Cluster를 시작합니다. 오류 : 주 클래스 org.apache.zookeeper.server.quorum.QuorumPeerMain을 찾거나로드 할 수 없습니다.

  5. 5

    어떻게 reslove: InvalidArgumentError: 그래프 실행 오류가 발생합니까?

  6. 6

    PyCharm에서 프로젝트를 제거하는 방법은 무엇입니까?

  7. 7

    Python : 특정 범위를 초과하면 플롯의 선 색상을 변경할 수 있습니까?

  8. 8

    동적 링크 작동 방식, 사용법 및 dylib를 만드는 방법과 이유

  9. 9

    화살표와 테두리가있는 CSS 전용 툴팁

  10. 10

    웹 사이트 로딩 속도를 높이는 방법을 알려주세요.

  11. 11

    응답에 대한 JMESPath 필터링

  12. 12

    D3 JS에서 하프 도넛 원형 차트 값 표시

  13. 13

    Joomla 3의 단일 기사에서 소셜 미디어 아이콘을 게시 취소하는 방법은 무엇입니까?

  14. 14

    scipy.misc 이미지 함수의 AttributeError, ImportError (예 : imread, imresize, imsave, imshow 등)

  15. 15

    Xcode 6 Beta 4 Broke stringWithContentsOfURL : encoding : error :

  16. 16

    Java에서 HSSFCell의 최대 길이 늘리기

  17. 17

    Mac에서 python import nltk 오류

  18. 18

    오류 CS0019 : '<'연산자를 'string'및 'int'유형의 피연산자에 적용 할 수 없습니다.

  19. 19

    Libavformat은 RTP 스트림을 너무 빠르게 기록합니다(너무 높은 FPS).

  20. 20

    Linux 시스템에 대해 OPEN_MAX는 어디에 정의되어 있습니까?

  21. 21

    스프링 부트에서 application.properties 값을 동적으로 변경

뜨겁다태그

보관