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

Question

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

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

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

这里发生了两件事：

vendor.bundle.js 包含 bootstrap、jquery、tether, wowjs
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 > 系绳 > wowjs

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

Answer 1

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

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

这里发生了什么魔法？

Webpack 通过缩小和捆绑我的供应商创建 vendor.bundle.js 现在在全局上下文中执行的文件。
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 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']
    })
  ],
};

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

Webpack bundles my files in the wrong order (CommonsChunkPlugin)

javascript

uglifyjs

webpack

webpack-2

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

成功！

一切都很好。