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

Webpack bundles my files in the wrong order (CommonsChunkPlugin)

提问by Ollie Cee

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

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

I'm using the CommonsChunkPluginfor Webpack. The usage from the official documentationis 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.

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

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.

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

webpack.config.js

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

Two things are happening here:

这里发生了两件事：

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

1. vendor.bundle.js包含bootstrap、jquery、tether、 wowjs
2. bundle.js包含我的应用程序的其余部分

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

为了捆绑：
正确的：jquery，tether，bootstrap，wowjs
不正确的：bootstrap，jquery，tether，wowjs

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

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

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

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

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.

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

---

---

My other approach also resulted in the same issue

我的另一种方法也导致了同样的问题

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

我也试着import和require我的项文件（在这种情况下，app.jsx）无需使用的CommonChunkPlugin，并且还加载我的JavaScript库按字母顺序排列的某些原因。

webpack.config.js

webpack.config.js

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

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

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

app.jsx (entry)

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

The result?
Bootstrap > jQuery > Tether > wowjs

结果？
Bootstrap > jQuery > Tether > wowjs

---

---

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

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

采纳答案by Ivan

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

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

回答by Ollie Cee

Success!

成功！

webpack.config.js

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

What magic is happening here?

这里正在发生什么魔法？

1. Webpack creates vendor.bundle.jsby minifying & bundling my vendor files which now execute in the global context.
2. Webpack creates bundle.jswith all of its application code

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

---

---

entry file(app.jsx in this case)

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

import './script';

This script is just custom JavaScript that uses jQuery, Bootstrap, Tether and wowjs. It executes after vendor.bundle.js, allowing it to run successfully.

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

A mistake I made trying to execute my script.jswas that I thought it had to be in the global context. So I imported it with script-loader like this: import './script-loader!script';. In the end, you don't need to because if you're importing through your entry file it will end up in the bundle file regardless.

我在尝试执行 myscript.js时犯的一个错误是我认为它必须在全局上下文中。所以我喜欢这个剧本，装载机进口它：import './script-loader!script';。最后，您不需要这样做，因为如果您通过入口文件导入，无论如何它最终都会出现在包文件中。

---

---

Everything is all good.

一切都很好。

Thanks @Ivan for the script-loadersuggestion. I also noticed that the CommonsChunkPluginwas pulling the non-minified vendor versions so I chained uglify-loaderinto the process.

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

Although, I do believe some .min.jsare created differently to get rid of extra bloat. Though that is for me to figure out. Thanks!

虽然，我确实相信有些.min.js是为了摆脱额外的膨胀而创建的。虽然这是我要弄清楚的。谢谢！

回答by que1326

Worked with htmlWebpackPluginfrom official tutorials and switched the order form entrykey. ( vendorthen app)

使用官方教程中的htmlWebpackPlugin并切换订单输入键。（供应商然后是应用程序）

In webpack.config.js

在webpack.config.js 中

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
      vendor: [
          'angular'
      ],
      app: [
          './src/index.js',
          './src/users/users.controller.js',
          './src/users/users.directive.js',
      ]
  },
   plugins: [
       new CleanWebpackPlugin(['dist']),
       new HtmlWebpackPlugin({
           template: './src/index-dev.html'
       }),
       new webpack.NamedModulesPlugin()
  ...
}

Now in the generated index.htmlfile I have the correct order

现在在生成的index.html文件中我有正确的顺序

<script src='vendor.bundle.js'></script>
<script src='app.bundle.js'></scrip