Question

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

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

注意：对于那些不熟悉Bootstrap 4的人来说，目前需要一个名为Tether的JavaScript库依赖项。必须在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包含引导程序， 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＆gt; jQuery＆gt;系绳＆gt; 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(),
  ],
};

这里发生了什么魔法？

Webpack通过缩小＆amp;创建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 2

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

Answer 3

使用官方教程中的 htmlWebpackPlugin 并切换订单条目键。（供应商然后 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）

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

4 个答案:

成功！

一切都很好。