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

Question

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

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

注意：对于不熟悉 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 包含 bootstrap、jquery、tether、 哇
2. bundle.js 包含我的应用程序的其余部分

捆绑顺序：
正确： jquery、tether、bootstrap、wowjs
错误： bootstrap、@ 987654332@,tether,wowjs

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

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

我知道它们捆绑不正确导致 Chrome 开发。工具告诉我存在依赖性问题。当我通过工具和我的 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

---

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

Answer 1

成功了！

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 的创建方式不同，以消除额外的臃肿。虽然这是我自己想办法。谢谢！

Answer 2

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

Answer 3

使用官方教程中的 htmlWebpackPlugin 并切换了订单表单的 entry 键。 （vendor 然后是app）

在 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()
  ...
}

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

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

Answer 4

这对我有用https://www.npmjs.com/package/webpack-cascade-optimizer-plugin

const CascadeOptimizer = require('webpack-cascade-optimizer-plugin');

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(),

    new CascadeOptimizer({
        fileOrder: ['jquery', 'tether', 'bootstrap', 'wowjs']
    })
  ],
};