如何在 webpack 2.0 中将库移动到供应商包答案

【问题标题】：How to move a library to vendor bundle in webpack 2.0如何在 webpack 2.0 中将库移动到供应商包
【发布时间】：2017-05-14 16:55:47
【问题描述】：

在我获得的一个项目中，我有一个在整个网站上共享的 main.js 文件，这就是他们在其中包含外部依赖项 bootstrap.js 的原因。

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';

我正在尝试使用此项目设置 webpack，并希望将此供应商依赖项（即引导程序）移动到单独的块中，因为它不会经常更改。所以，我添加了一个新的“供应商”条目，如下所示

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'
        }),
    ]
}];

当我运行 webpack 构建时，构建生成正常且我的项目工作，但我已将引导程序复制到 2 个不同的块中，即main.js 和vendor.js。

我认为通过在 vendor 中声明 bootstrap，webpack 选择了引导 node_modules 并将其包含在 vendor.js 中。

现在，我需要的 webpack 输出是，仅将 ./thirdparty/bootstrap js 文件中存在的引导组件移动到供应商块。

有可能吗？

【问题讨论】：

标签： javascript twitter-bootstrap webpack webpack-2

【解决方案1】：

我通过在我的供应商中指定我想要的确切依赖项来解决它。

['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 后，我需要解决我的重复问题。

【讨论】：