tl; dr; 스크립트 태그로 코드를 번거롭게하지 않고 여러 개의 webpack 번들을 어떻게로드해야합니까?여러 webpack 번들을 올바르게로드 중

webpack을 더 많이 사용하고 있습니다. 그러나 webpack 번들을로드 할 때 누락 된 부분이있는 것 같습니다. 당신이 코드를 모듈로 나눌 수있는 requirejs를 사용하고 있습니다 (webpack의 번들과 동등한 것으로 생각합니다).하지만 requirejs를 사용하면 코드에서 이름으로 스크립트를 요구할 수 있습니다. 코드는 웹 패키지의 URL로 매핑됩니다. 페이지에 스크립트 태그를 포함 시키면 응용 프로그램의 화면 전체에 스크립트가 흩어져서 제어가 어려워 질 수 있습니다. 따라서 태그를 업데이트하는 대신 번들을 전환하는 것이 더 어려워집니다. 단일 URL을 발견하고 세계의 끝이 아니라 그 URL의 모든 출현을 바꿀 필요가 있지만 그것은 나도 이 기능을 더 쉽게 사용할 수있는 기능을 추가했거나 requirejs와 webpack 사이에 받아 들여진 차이점 일 수 있습니다.

나는 webpack을 추가하는 것을 고려하고있는 코드베이스 중 하나도 언급하지 말아야한다. 그래서 단일 페이지 응용 프로그램은 아마도 webpack이 이런 종류의 환경에 적합하지 않은 것일까? 그것은이

페이지 스켈 톤/레이아웃과 같을 것이다 있도록
그냥에서 포함되어야 내가이하려는 것이 무엇에 컨텍스트의 조금을 추가, 우리의 서버 측 코드는 MVC 패턴을 사용

<html> 
<head><!-- stuff here --></head> 
<body> 
    <!-- some included view here --> 
</body> 
</html>

도 1

<div> 
    <!-- ... --> 

    <!-- Currently it has this --> 
    <script> 
     require(['something'], function(s){ /* new s(); */ /* s(); */ /* etc */ }); 
    </script> 
    <!-- and i'd imagine it would be like this with webpack --> 
    <script src="my_bundle.js"></script> 
</div>

도 2

<div> 
    <!-- ... --> 

    <!-- Currently it has this --> 
    <script> 
     require(['something', 'another_thing'], function(s){ /* new s(); */ /* s(); */ /* etc */ }); 
    </script> 
    <!-- and i'd imagine it would be like this with webpack --> 
    <script src="my_bundle.js"></script> 
    <script src="my_bundle2.js"></script> 
</div>

,745,

출처

2017-12-15 Snipzwolf

나는 완전히 라우터 접근 방식에 만족하지 않았다. 왜냐하면 자바 스크립트에서 우리의 URL 재 작성 설정을 복제하고 페이지가 코드를 공유하는 곳에서 가져 오기 문을 복제해야한다는 것을 의미했기 때문이다. 그러나 import docs은 가져온 스크립트는 페이지로드 중에 동적으로로드되는 대신 최종 번들에 포함되어 대부분의 시간에 사용되지 않는 많은 코드를 번들에 포함하게됩니다.

나에게 가장 좋은 접근법은 다음과 같이 기존 코드와 비슷한 구조를 유지할 수있는 번들 파일 (아래 예)을로드하는 requirejs의 간단한 버전을 효과적으로 만드는 것입니다. 내 자신의 로더를 굴리기보다는 도서관을 위해,하지만 아직 결정하지 않았습니다.

로더

class Loader{ 

    constructor(config){ 
    this.config = config; 
    } 

    load(modName){ 
    if(this.config.debug)console.log('loader - ', 'load called', arguments); 

    if(!document.getElementById(modName)){ 
     if(this.config.debug)console.log('loader - ', 'loading new script', modName, this.config.map[modName]); 

     var script = document.createElement('script'); 
     script.id = modName; 
     script.type = 'text/javascript'; 
     script.src = this.config.map[modName]; 
     script.async = true; 
     document.head.appendChild(script); 
    } 
    } 

} 

export default Loader;

로더 구성

window.loader = new Loader({ 
    'debug': true, 
    'map': { 
    'something': '/scripts/bundle.js', 
    'another_thing': '/scripts/bundle2.js' 
    } 
});

보기 때문에 1

<div> 
    <!-- ... --> 

    <!-- Currently it has this --> 
    <script> 
     require(['something'], function(s){ /* new s(); */ /* s(); */ /* etc */ }); 
    </script> 
    <!-- which would change to (any of the callback code would be inside the bundle) --> 
    <script> 
     window.loader.load('something'); 
    </script> 
</div>

출처

2017-12-18 15:20:45 Snipzwolf

최근 싱글 페이지 애플리케이션에서 webpack의 code splitting 기능을 사용하여 경로를 기반으로 번들을 동적으로로드합니다. 이렇게해야 응용 프로그램 전체에서 스크립트 태그를 쓸데없이 낭비 할 필요가 없습니다. 당신을 의미 웹팩에 의해 번들 종속성 트리의 루트 즉,

// Index 
router.on(() => { 

    import(/* webpackChunkName: "routeA" */ '../routes/routeA').then((module) => { 
    // do something with your loaded module 
    }).resolve(); 
});

Dynamically loading이 '루트'스타일 모듈 : 어떤 종류의 라우팅 메커니즘을 사용하는 경우는 동적으로 경로과 같이 액세스 할 종속성을 가져올 수 있습니다 필요할 때만 가져올 수 있습니다. 즉, 클라이언트는이 경로를 실행할 때이 번들을 가져옵니다.

편집 : 동적 수입을 사용

은 웹팩 설정에서 chunkFilename 속성의 추가가 필요하면 express.js를 사용하는 경우는 라우팅 메커니즘 다음과 같은 할 수 있습니다. 가장 좋은 방법은 위에 링크 된 webpack에서 제공하는 코드 분할 문서를 참조하는 것입니다.

출처

2017-12-15 12:10:51

내가 제대로 이해하고있어 귀하의 모든 경로에 모든 페이지에 포함 된 번들을했을 경우 그런 다음 다른 필수 번들을로드합니까? 웹팩에 내장 된 라우팅 기능 또는 다른 라이브러리에서 제공하는 라우팅 기능이 맞습니까? – Snipzwolf

또한 임포트 호출에서 컨벤션의 코멘트입니까, 아니면 어떤 의미가 있습니까? 나는 게으른 로딩을 위해 [docs] (https://webpack.js.org/guides/lazy-loading/)를 읽었지만, 문제를 해결하지 못했습니다. – Snipzwolf

주석은 번들링 된 청크에 이름을 할당하기 위해 웹 팩 코드 분할에 사용되는 특수 주석입니다. 비워두면 임의의 이름이 생성됩니다. 애플리케이션에서 서버로 무엇을 사용하고 있습니까? –

여러 webpack 번들을 올바르게로드 중

페이지 스켈 톤/레이아웃과 같을 것이다 있도록 그냥에서 포함되어야 내가이하려는 것이 무엇에 컨텍스트의 조금을 추가, 우리의 서버 측 코드는 MVC 패턴을 사용

도 1

도 2

답변

로더

로더 구성

보기 때문에 1

관련 문제

페이지 스켈 톤/레이아웃과 같을 것이다 있도록
그냥에서 포함되어야 내가이하려는 것이 무엇에 컨텍스트의 조금을 추가, 우리의 서버 측 코드는 MVC 패턴을 사용