모듈을 다른 모듈을 기반으로 즉시 번들에 추가하는 Webpack 플러그인 작성 방법은 무엇입니까?

Question

번역 서비스 용 Webpack 플러그인을 작성하는 데 문제가 있습니다.

1. 컴파일시에 필요한 모든 모듈의 이름 (소스 코드)를 가져 오기 :에

   목표입니다. 특수한 t() 기능 사용을 위해 포함 된 소스 코드를 스캔 할 수 있어야하지만 번들에 포함될 모듈 만 검사합니다 (빌드 구성에 따라 모든 프로젝트 모듈의 하위 집합이 될 수 있음).

2. 수집 된 모듈을 기반으로 추가 모듈을 변환하여 즉시 만들고 번들에 추가하려고합니다. 이러한 모듈은 자체 종속성을 가져올 수 있어야합니다.

추가 요구 사항은 웹팩의 코드 분할 기능은 즉석에서 만든 모듈로 작업해야한다는 것입니다 (- 예를 들어, bundle.[lang].js 나는 개별 파일을 추출 할). 또한이 질문의 범위를 벗어날 수 있으므로 번역을 선택하여 해당 덩어리를 만들어야합니다 (모든 언어를로드 할 필요가 없으므로).

자세한 내용은 https://github.com/ckeditor/ckeditor5/issues/387에서 찾을 수 있습니다.

여러 솔루션을 시도했지만 Webpack 2의 설명서는별로 도움이되지 않습니다. 모듈 해상도의 후크 (before-resolve)를 듣고 모든 모듈을 가져올 수 있지만 모든 종속성이 해결되는 시점을 알 수 없으며 그 이후에 모듈을 추가 할 수 있는지 여부를 알지 못합니다. addEntry 괜찮습니까? 언제 사용할 수 있습니까?).

Webpack 플러그인과 Webpack 로더 (내가 필요한 기능이 Webpack's style-loader과 매우 비슷하기 때문에)를 연결하려고 생각했지만 플러그 인 수준에서 로더 자체가 아니라 로더에 경로를 추가 할 수 있습니다. 구성 객체를 매개 변수로 전달하지 않습니다. 제가 틀 렸습니다.

추신. Webpack 2를 사용합니다. 요구 사항이 이상하게 보일 경우 https://github.com/ckeditor/ckeditor5/issues/387 :)을 참조하십시오.

Answer 1

이것은 정말로 복잡한 질문이지만, 특정 모듈에 필요한 종속성을 추가 모듈에 추가 할 수있는 방법을 보여줄 수 있습니다. 이렇게하면 추가 된 모듈이 올바른 청크에있게되며 상위 모듈이 번들에서 제거되면 제거됩니다.

const CommonJsRequireDependency = require("webpack/lib/dependencies/CommonJsRequireDependency") 

class MyPlugin { 
    apply(compiler) { 
    compiler.plugin("compilation", compilation => { 
     compilation.plugin("succeed-module", module => { 
     // this will be called for every successfully built module, but before it's parsed and 
     // its dependencies are built. The built source is available as module._source.source() 
     // and you can add additional dependencies like so: 
     module.dependencies.push(new CommonJsRequireDependency("my-dependency", null)) 
     } 
    } 
    } 
} 

이것은 일부분에 지나지 않습니다. 실제로 번역을 생성하기 위해 직접 로더를 작성해야합니다 (my-dependency을 위의 코드로 바꾸려면 my-loader!path/to/module으로 바꿀 수 있음). 청크가 생성 된 후 일부 단계가 생성되어 새 애셋으로 추출되어로드됩니다. 실제로 require d가 아닙니다.