Webpack以错误的顺序捆绑我的文件（CommonsChunkPlugin） [英] Webpack bundles my files in the wrong order (CommonsChunkPlugin)

问题描述

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

What I want is to bundle my JavaScript vendor files in a specific order via CommonsChunkPlugin from Webpack.

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

I'm using the CommonsChunkPlugin for Webpack. The usage from the official documentation is straight forward and easy. It works as intended but I believe the plugin is bundling my files in alphabetical order (could be wrong). There are no options for the plugin to specify the order they should be bundled.

注意：对于那些谁不熟悉Bootstrap 4，它目前
需要一个名为Tether的JavaScript库依赖项。
Tether必须在Bootstrap之前加载。

Note: For those who are not familiar with Bootstrap 4, it currently requires a JavaScript library dependency called Tether. Tether must be loaded before 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 包含 bootstrap ， jquery ， tether ，
   wowjs


2. bundle.js 包含我的应用程序的其余部分

1. vendor.bundle.js contains bootstrap, jquery, tether, wowjs
2. bundle.js contains the rest of my application

捆绑订单：

正确： jquery ， tether ， bootstrap ， wowjs

不正确： bootstrap ， jquery ， tether ， wowjs

Bundling order:
correct: jquery, tether, bootstrap, wowjs
incorrect: bootstrap, jquery, tether, wowjs

请注意我的 webpack.config .js 我完全按照自己的意愿订购了它们，但它们是以不正确的顺序捆绑在一起的。如果我随机重新排列它们并不重要，结果是相同的。

Notice in my webpack.config.js I ordered them exactly as they should but they are bundled in the incorrect order. It doesn't matter if I rearrange them randomly the result is the same.

在我使用Webpack构建我的应用程序后， vendor.bundle .js 向我显示错误的订单。

After I use Webpack to build my application, the vendor.bundle.js shows me the incorrect order.

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

I know they're bundled incorrectly cause Chrome Dev. Tools tell me there are dependency issues. When I view the file through the tool and my IDE, it is bundled in the incorrect order.

我也试过 import 和 require 在我的条目文件（在这种情况下，app.jsx），不使用 CommonChunkPlugin ，并且还加载我的JavaScript库出于某种原因按字母顺序排列。

I also tried import and require in my entry file (in this case, app.jsx) without the use of the CommonChunkPlugin and that also loads my JavaScript libraries in alphabetical order for some reason.

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

The result?
Bootstrap > jQuery > Tether > wowjs

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

How do I load my vendor files in the correct order?

推荐答案

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

You can try https://webpack.js.org/guides/shimming/#script-loader - it looks like it will execute scripts in order and in global context.

这篇关于Webpack以错误的顺序捆绑我的文件（CommonsChunkPlugin）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！