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

Question

我想要的是通过 Webpack 中的 CommonsChunkPlugin 按特定顺序捆绑我的 JavaScript 供应商文件。

我正在为 Webpack 使用 CommonsChunkPlugin 。 官方文档 中的用法简单明了。它按预期工作，但我相信该插件按字母顺序捆绑了我的文件（可能是错误的）。插件没有选项来指定它们应该被捆绑的顺序。

注意： 对于那些不熟悉 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 包含我的应用程序的其余部分

捆绑顺序：

正确： jquery ， tether ， bootstrap ， wowjs

不正确： bootstrap ， jquery ， tether ， wowjs

请注意，在我的 webpack.config.js 中，我完全按照它们应有的顺序对它们进行了排序，但它们以 错误的 顺序捆绑在一起。如果我随机重新排列它们并不重要，结果是一样的。

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

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

---

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

我还在我的入口文件 （在本例中为 app.jsx） 中尝试了 import 和 require --- 而没有使用 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';

或者

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

---

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

原文由 Ollie Cee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试 https://webpack.js.org/guides/shimming/#script-loader - 它看起来会在全局上下文中按顺序执行脚本。

原文由 Ivan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

成功！

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。它在 vendor.bundle.js 之后执行，使其能够成功运行。

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

---

一切都很好。

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

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

原文由 Ollie Cee 发布，翻译遵循 CC BY-SA 3.0 许可协议