webpack 2.0에서 라이브러리를 공급 업체 번들로 이동하는 방법

내가 취득한 프로젝트에서 main.js 파일이 웹 사이트에서 공유되므로 외부 종속성 bootstrap.js이 포함 된 것입니다.webpack 2.0에서 라이브러리를 공급 업체 번들로 이동하는 방법

main.js

window.jQuery = window.$ = require('jquery'); 

$(document).ready(function() { 
    require('./components/menu')(); 
    //other components 
}); 

require('./thirdparty/bootstrap'); 
require('./components/spinner');

./thirdparty/bootstrap

// import '../../../../../../../node_modules/bootstrap/js/src/alert'; 
// import '../../../../../../../node_modules/bootstrap/js/src/button'; 
import '../../../../../../../node_modules/bootstrap/js/src/carousel'; 
import '../../../../../../../node_modules/bootstrap/js/src/collapse'; 
// import '../../../../../../../node_modules/bootstrap/js/src/dropdown'; 
import '../../../../../../../node_modules/bootstrap/js/src/modal'; 
// import '../../../../../../../node_modules/bootstrap/js/src/popover'; 
import '../../../../../../../node_modules/bootstrap/js/src/scrollspy'; 
import '../../../../../../../node_modules/bootstrap/js/src/tab'; 
// import '../../../../../../../node_modules/bootstrap/js/src/tooltip';

난에이 공급 업체 의존성, 즉 부트 스트랩을 이동하려는이 프로젝트 &로 설정 웹팩에 노력하고 있습니다 자주 변경되지 않으므로 별도의 청크. 그래서, 나는 내가 웹팩 빌드가 & 내 프로젝트 작품 잘 생성하지만 부트 스트랩이 다른 덩어리에 복사 한 건설 main.js & vendor.js에 즉 실행하면

module.exports = [{ 
    name: 'js', 
    entry: { 
     main : './src/main.js', 
     vendor : ['jquery', 'bootstrap'] 
     //other entries 
    }, 
    output: { 
     path: './dist', 
     filename: '[name].js' 
    }, 
    module: { 
     loaders: [ /*loaders like babel */ ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: Infinity, 
      filename: '[name].[chunkhash].js' 
     }), 
    ] 
}];

아래 같은 새로운 '공급 업체'항목을 추가했다.

벤더에 bootstrap을 선언하면 webpack이 bootstrap node_modules를 선택하여 vendor.js에 포함 시켰다고 생각합니다.

필자가 필요한 webpack 출력은 ./thirdparty/bootstrap js 파일을 공급 업체 청크에있는 경우에만 이동시키는 것입니다.

그렇게 할 수 있습니까?

출처

2017-05-14 RanRag

나는 벤더에서 원하는 정확한 의존성을 지정하여 문제를 해결했습니다.

['jquery', './node_modules/bootstrap/js/src/carousel.js', 
'./node_modules/bootstrap/js/src/collapse.js', './node_modules/bootstrap/js/src/modal.js', 
'./node_modules/bootstrap/js/src/scrollspy.js', './node_modules/bootstrap/js/src/tab.js' 
];

정확하게 부트 스트랩 js를 지정한 후에는 필자의 이중화 문제가 해결되었습니다.

출처

2017-05-15 07:47:02 RanRag

webpack 2.0에서 라이브러리를 공급 업체 번들로 이동하는 방법

답변

관련 문제