webpacks System.import에서 ajax (진행 이벤트 용)를 사용할 수 있습니까?

Question

그래서 webpack 2로 업데이트했고 webpack이 System.import 호출을보고 청크를 자동으로 생성하는 첫 번째 작업 설정을했습니다. 꽤 달콤한! 나는 그래서 내 질문은 show the progress while loading

입니다 수 있도록

그러나, 나는 내가 덮어 쓸 수, 아약스 호출 초기 청크를로드하거나 Ajax 요청을 사용할 수 있도록 어떻게 든 System.import의 기능을 변경하는 청크에 <script> 태그를로드하는 대신 이벤트를 청취 할 수 있습니까?

Answer 1

아니요, 불행히도 아닙니다. webpack 2는 System.import()을 <script> 태그를 사용하는 일반 require.ensure() 호출로 변환합니다. 공식 WHATWG Loader Spec조차도 이런 종류의 이벤트를위한 API를 제공하지 않습니다. 이 질문에 created an issue이 있습니다.

webpack 관련 : 직접 require.ensure()을 구현할 수있는 방법이 있습니다. 그러나 덩어리 로딩은 웹팩의 핵심 부분이므로 조금 더 깊이 들어가야합니다. 이것이 당신에게 얼마나 중요한지는 잘 모르겠지만, 웹팩 안에서 일하는 방식에 관심이있을 수 있습니다.

webpack에서는 모든 내부 기능이 플러그인으로 구현됩니다. 이 방법으로 webpack은 많은 다른 기능과 환경을 지원할 수 있습니다. 따라서 webpack에서 구현되는 방법에 관심이 있다면 항상 WebpackOptionsApply을 보거나 특정 문자열/코드 스 니펫을 검색하는 것이 좋습니다.

각 환경마다 다른 구현이 필요하기 때문에 청크로드는 주어진 target에 크게 의존합니다. Webpack을 사용하면 사용자 정의 대상을 정의 할 수 있습니다. 문자열 대신 함수를 전달하면 webpack은 compiler 인스턴스와 함께 함수를 호출합니다. 필요한 모든 플러그인을 적용 할 수 있습니다. 우리의 지정 대상이 거의 web 대상처럼이기 때문에, 우리는 단지 web 대상에서 모든 물건을 복사 : 각 플러그인을 살펴 경우

// webpack.config.js 

const NodeSourcePlugin = require("webpack/lib/node/NodeSourcePlugin"); 
const FunctionModulePlugin = require("webpack/lib/FunctionModulePlugin"); 
const LoaderTargetPlugin = require("webpack/lib/LoaderTargetPlugin"); 
const JsonpChunkTemplatePlugin = require("webpack/lib/JsonpChunkTemplatePlugin"); 
const JsonpHotUpdateChunkTemplatePlugin = require("webpack/lib/JsonpHotUpdateChunkTemplatePlugin"); 

function customTarget(compiler) { 
    compiler.apply(
     new JsonpTemplatePlugin(compiler.options.output), 
     new FunctionModulePlugin(compiler.options.output), 
     new NodeSourcePlugin(compiler.options.node), 
     new LoaderTargetPlugin("web") 
    ); 
} 

module.exports = { 
    entry: require.resolve("./app/main.js"), 
    output: { 
     path: path.resolve(__dirname, "dist"), 
     filename: "bundle.js" 
    }, 
    target: customTarget 
}; 

, 당신은 JsonpTemplatePlugin로드 청크에 대한 책임이 있음을 알 것이다. 그래서 그것을 자체적 인 구현으로 바꾸자. 우리 XHRTemplatePlugin는 각 자식 덩어리에 뜨거운 업데이트, 주요 덩어리의 코드를 제공 할 책임이

function customTarget(compiler) { 
    compiler.apply(
     new XHRTemplatePlugin(compiler.options.output), 
     new FunctionModulePlugin(compiler.options.output), 
     new NodeSourcePlugin(compiler.options.node), 
     new LoaderTargetPlugin("my-custom-target") 
    ); 
} 

: 어쩌면

function XHRTemplatePlugin() {} 

XHRTemplatePlugin.prototype.apply = function (compiler) { 
    compiler.plugin("this-compilation", function(compilation) { 
     compilation.mainTemplate.apply(new XHRMainTemplatePlugin()); 
     compilation.chunkTemplate.apply(new XHRChunkTemplatePlugin()); 
     compilation.hotUpdateChunkTemplate.apply(new XHRHotUpdateChunkTemplatePlugin()); 
    }); 
}; 

, 당신은 또한 다시 사용할 수 있습니다 우리는 XHRTemplatePlugin가 호출 JsonpChunkTemplatePlugin 및 JsonpHotUpdateChunkTemplatePlugin 플러그인이지만 사용 사례/구현에 따라 다릅니다.

귀하의 XHRMainTemplatePlugin 지금과 같이 보일 수 있습니다 :이 대답은 충분히 이미 생각하기 때문에

function XHRMainTemplatePlugin() {} 

XHRMainTemplatePlugin.prototype.apply = function (mainTemplate) { 
    mainTemplate.plugin("require-ensure", function(_, chunk, hash) { 
     return this.asString([ 
      // Add your custom implementation here 
      "fetch()" 
     ]); 
    }); 
}; 

내가 더 이상 여기되지 않습니다. 그러나 실제 작은 예제 프로젝트를 만들고 webpack에 의해 생성 된 출력을 확인하는 것이 좋습니다. 내부 webpack 플러그인은 첫눈에 약간 무서운 것처럼 보일 수 있지만 대부분은 진짜 짧고 단 한 가지 일뿐입니다. 당신은 또한 그들로부터 영감을 얻을 수 있습니다.