2017-12-07 16 views
8

코드 분할을 사용하는 webpack으로 애플리케이션을 구축했습니다. 이제 모든 입력 청크 (코드 분할을 통해 생성됨)의 모든 하위 청크를 하나의 별도 커먼즈 청크로 특정 조건 (이 경우 node_modules)과 일치하는 모든 공통 모듈을 집계하려고합니다.Webpack : 공용 및 청크에서 일반 모듈을 추출하여 공통 공유 청크로 변환

나는 경우이 :

new webpack.optimize.CommonsChunkPlugin({ 
    children: true, 
    async: 'vendor', 
    minChunks: (module) => { 
     const isVendor = module.context.split('/').some(dir => dir === 'vendor'); 
     return isVendor; 
    }, 
}), 

웹팩는하지만 아이의 모듈에 대한 별도의 공유지 청크로 minChunks 기능과 일치하는 모든 모듈을 집계됩니다 덩어리를-그 것이다 항목 청크에서하지 집계 모듈로 커먼즈 덩어리. 결과적으로 필자는 입력 덩어리와 공유 덩어리에 나타나는 모듈을 복제했습니다.

어떻게 가능합니까?


예 : https://github.com/OliverJAsh/webpack-commons-vendor/blob/f524bfdb0e047161c453a6b84f89ab6d25d6c648/webpack.config.js

enter image description here

답변

5

당신은 모든 일반적으로 사용되는 libs가 포함 된 웹팩 DLL을 작성해야합니다.

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

이를 설정하는 방법에 대한 예

반작용-상용구에서 찾을 수 있습니다. 여기

https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/webpack/webpack.dll.babel.js

그리고

는 예를 들어 설정입니다.

https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/config.js