Webpack 以错误的顺序捆绑我的文件 (CommonsChunkPlugin)

我想要的是通过以下方式按特定顺序捆绑我的 JavaScript 供应商文件CommonsChunkPlugin来自 Webpack。

我正在使用CommonsChunkPlugin对于 Webpack。用法来自官方文档 https://webpack.js.org/plugins/commons-chunk-plugin/简单明了。它按预期工作，但我相信该插件按字母顺序捆绑我的文件（可能是错误的）。插件没有选项来指定它们应该捆绑的顺序。

Note:对于那些不熟悉 Bootstrap 4 的人来说，目前它 需要一个名为 Tether 的 JavaScript 库依赖项。 Tether 必须在 Bootstrap 之前加载。

webpack.config.js

module.exports = {
  entry: {
    app: './app.jsx',
    vendor: ['jquery', 'tether', 'bootstrap', 'wowjs'],
  },

  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.bundle.js'
    }),

    new webpack.optimize.UglifyJsPlugin(),
  ],
};

这里发生了两件事：

1. vendor.bundle.js包含引导程序, jquery, tether, wowjs
2. bundle.js包含我的申请的其余部分

捆绑订单：
correct: jquery, tether, bootstrap, wowjs
不正确： bootstrap, jquery, tether, wowjs

通知在我的webpack.config.js我完全按照应有的方式订购了它们，但它们捆绑在不正确命令。即使我随机重新排列它们，结果也是一样的。

当我使用 Webpack 构建我的应用程序后，vendor.bundle.js显示了错误的顺序。

我知道它们的捆绑方式不正确，导致 Chrome Dev。工具告诉我存在依赖性问题。当我通过工具和 IDE 查看该文件时，它以错误的顺序捆绑。

我的其他方法也导致了同样的问题

我也尝试过import and require在我的条目文件中（在本例中为 app.jsx）不使用CommonChunkPlugin并且出于某种原因，它还会按字母顺序加载我的 JavaScript 库。

webpack.config.js

module.exports = {
  entry: './app.jsx',

  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },

  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
  ],
};

app.jsx（条目）

import './node_modules/jquery/dist/jquery.min';
import './node_modules/tether/dist/js/tether.min';
import './node_modules/bootstrap/dist/js/bootstrap.min';
import './node_modules/wowjs/dist/wow.min';

or

require('./node_modules/jquery/dist/jquery.min');
require('./node_modules/tether/dist/js/tether.min');
require('./node_modules/bootstrap/dist/js/bootstrap.min');
require('./node_modules/wowjs/dist/wow.min');

结果？
Bootstrap > jQuery > Tether > wowjs

如何以正确的顺序加载我的供应商文件？

Success!

webpack.config.js

module.exports = {
  entry: {
    app: './app.jsx',
    vendor: [
        "script-loader!uglify-loader!jquery",
        "script-loader!uglify-loader!tether",
        "script-loader!uglify-loader!bootstrap",
        "script-loader!uglify-loader!wowjs",
    ]
  },

  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.bundle.js'
    }),

    new webpack.optimize.UglifyJsPlugin(),
  ],
};

这里发生了什么魔法？

1. Webpack 创建vendor.bundle.js通过缩小和捆绑我的供应商 现在在全局上下文中执行的文件。
2. Webpack 创建bundle.js及其所有应用程序代码

入口文件 （本例中为 app.jsx）

import './script';

该脚本只是使用 jQuery、Bootstrap、Tether 和 wowjs 的自定义 JavaScript。它执行后供应商.bundle.js，使其能够成功运行。

我在尝试执行我的任务时犯了一个错误script.js我认为它必须放在全球背景下。所以我用脚本加载器导入它，如下所示：import './script-loader!script';。最后，您不需要这样做，因为如果您通过条目文件导入，无论如何它最终都会出现在捆绑文件中。

一切都很好。

感谢@Ivan 的script-loader建议。我还注意到CommonsChunkPlugin正在拉动非缩小的供应商版本，所以我链接了uglify-loader进入这个过程。

虽然，我确实相信一些.min.js以不同的方式创建以消除额外的膨胀。虽然这是我要弄清楚的。谢谢！