웹팩 내 프로젝트의 간단한 예를 구성

Question

제작 한 자식의 repo를 구축 https://github.com/paveleremin/webpack-build

질문입니다 : 모든 파일을 JS (

1. 구성 요소 :처럼 여러 덩어리로 구축하는 방법 (모두가 두 개 이상의 모듈)
2. 매니페스트 (웹팩 JS 코드에서 사용/node_modules /과/응용 프로그램/공급 업체/폴더에서 파일을 JS 두 개 이상의 모듈)
3. 업체에서 사용/응용 프로그램/구성 요소/폴더, 바벨 폴 리필 등) 모듈의 js 파일

당

은 지금으로 문제가 있었다 빌드 : scUsedTwice의

new webpack.optimize.CommonsChunkPlugin({ 
    async: 'components', 
    children: true, 
    minChunks({ resource }, count) { 
     return resource && resource.includes(paths.components) && count > 1; 
    } 
}), 

new webpack.optimize.CommonsChunkPlugin({ 
    async: 'vendors', 
    children: true, 
    minChunks({ resource }, count) { 
     console.log(resource, count); 
     return resource && (resource.includes(paths.nodeModules) || resource.includes(paths.vendor)) && count > 1; 
    } 
}), 

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'manifest', 
}), 

1. 소스를 복사 - 붙여 넣기입니다뿐만 아니라 login.js 및 dashboard.js에 존재 - 는
2. 모든 공급 업체가 app.js에 해결하고자

,

직접 시도했지만 비동기 모듈에 문제가 있습니다.

Answer 1

여기에 많은 질문이 있습니다!

벤더 및 매니페스트은 관련되어 있으므로 질문에 답변 해 드리겠습니다.

개발자의 특성, 파리의 빈도 및 빌드 우선 순위에 따라 여러 가지 방법이 있습니다.

'dll'()을 사용하면 공급 업체/dll 번들로 들어가기 원하는 파일을 정확히 알 때 업체 파일이 거의 변경되지 않는다는 것을 알고있을 때 유용합니다. 이 메소드는 필요할 때만 한 번만 빌드하므로 빌드 시간이 매우 빠릅니다.

내 제 3 자 패키지가 포함 된 'vendor.js'파일을 명시 적으로 사용하여이 작업을 수행 한 방식입니다. 그런 다음이 파일을 다르게 처리하도록 webpack을 설정합니다. 이것의 이점은 공급 업체 파일이 더 명확하고 업데이트하기 쉽지만 빌드가 약간 느려질 것입니다.

entry: { 
    app: [`${SRC}/client-entry.js`], 
    vendor: [`${SRC}/vendor.js`] 
    } 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ names: ['vendor'], minChunks: Infinity }), 
    ] 

매니페스트를 만드는 방법은 위와 비슷합니다. 난 당신이 그것을 통해 갈 시간을 한 경우입니다 발견했습니다

new webpack.optimize.CommonsChunkPlugin({ name: "manifest", minChunks: Infinity } 

가장 좋은 소스 : 또한 common chunks plugin을 사용하여 추가 할 필요가 https://survivejs.com/webpack/optimizing/separating-manifest/

난 당신이 비동기 및 저작권법과 게시 제안 수 별도의 질문에 문제가 있습니까?