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

Question

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

我正在使用CommonsChunkPluginfor Webpack.官方文档的用法很简单直接.它按预期工作,但我相信该插件按字母顺序捆绑我的文件(可能是错误的).插件没有选项来指定它们应该捆绑的顺序.

注意:对于那些不熟悉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(),
  ],
};

这里发生了两件事:

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

为了捆绑:
正确的: jquery,tether,bootstrap,wowjs
不正确的: bootstrap,jquery,tether,wowjs

请注意,在我的webpack.config.js中,我完全按照他们的要求对它们进行了排序,但是它们以错误的顺序捆绑在一起.如果我随机重新排列它们并不重要,结果是一样的.

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

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

---

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

我也试过import并require在我的入口文件(在这种情况下,app.jsx)中没有使用它,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 - 看起来它将按顺序和全局上下文执行脚本.