Webpack을 사용하여 컴파일 된 앱용 플러그인 시스템

Question

컨텍스트 : Webpack에서 함께 묶은 프런트 엔드의 Symfony 및 반응/반응 라우터를 사용하여 자체 제품을 개발하고 있습니다. 내 응용 프로그램을 "확장"으로 나눌 계획이므로 "코어"번들과 그 주위에 여러 번 확장 번들 (내 제품에 대한 추가 기능 집합)을 갖게됩니다.

이제 프런트 엔드를 백 엔드만큼 확장 가능하게하고 싶습니다. 내 "CoreBundle"에있는 기존 "코어"세트에 내 확장 번들과 함께 새로운 React 구성 요소를 추가 할 수 있기를 원합니다.

그러나 Webpack이 그런 종류의 플러그인 시스템을 생산하기에는 너무 긴밀하게 캡슐화하고있는 것처럼 보입니다. 별도의 Webpack 구성을 갖는 여러 번들을 가질 수 있습니까?하지만 JavaScript는 플러그인 시스템을 개발할 수있는 방식으로 상호 연결됩니까? 목표는 하나의 Bundle을 독립적으로 개발할 수있는 동시에 동시에 다른 Bundle에서 이미 컴파일 된 일부 JS 리소스를 사용할 수있게하는 것입니다.

Answer 1

난 당신 만 묶고 DllPlugin과 DllReferencePlugin

DllPlugin는 DLL 을 만들기 위해 별도의 웹팩 설정에서 사용을 사용하여이를 달성 할 수 있어야한다고 생각합니다. 또한 종속성을 매핑하기 위해 DllReferencePlugin에서 사용하는 manifest.json 파일을 만듭니다. 내 경우에는

https://webpack.js.org/plugins/dll-plugin/

에 대한 자세한 문서를

를 참조하십시오, 나는 모든 공급 업체 라이브러리를 결합 할 때 사용 한 빌드 (플럭스 등 반응) 후 기준으로하는 것이 사용 내 Webpack Config에서 모든 React 구성 요소 등을 번들링하지만 DllReferencePlugin을 사용하여 React 및 다른 라이브러리를 참조합니다.

내 webpack.dll.js 설정 파일 : 내 주요 webpack.config.js에서

var path = require("path"); 
var webpack = require("webpack"); 

module.exports = { 
    entry: { 
    libs: [path.join(__dirname, "common", "lib.js")] 
    }, 
    output: { 
    path: path.join(__dirname, "dist", "dll"), 
    filename: "[name].dll.js", 
    library: "[name]" 
    }, 
    plugins: [ 
    new webpack.DllPlugin({ 
     path: path.join(__dirname, "dll", "[name]-manifest.json"), 
     name: "[name]", 
     context: path.resolve(__dirname, "common") 
    }), 
    ] 
}; 

그리고, 나는 참조 플러그인을 사용합니다.

new webpack.DllReferencePlugin({ 
     context: path.resolve(__dirname, "common"), 
     manifest:require('./dll/libs-manifest.json') 
    }) 

코드 분할 방법에 따라 요구 사항에 따라 각각 별도의 웹팩 구성으로 여러 개의 DLL을 만들 수 있습니다. 그런 다음 dll을 다른 webpack 번들에서 요구 사항에 따라 참조하십시오.