Javascript Webpack以错误的顺序捆绑我的文件（CommonChunkPlugin）

我想要的是通过Webpack中的

CommonChunkPlugin

以特定顺序捆绑我的JavaScript供应商文件

我正在使用

commonchunkplugin

作为网页包。来自的用法简单明了。它按预期工作，但我相信插件是按字母顺序捆绑我的文件（可能是错误的）。插件没有选项来指定绑定顺序

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

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开发工具告诉我存在依赖性问题。当我通过工具和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(),
  ],
};

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

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

app.jsx（条目）

或

结果如何？
引导>jQuery>Tether>wowjs

---

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

您可以尝试-看起来它将按顺序在全局上下文中执行脚本。

成功！ webpack.config.js

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

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

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

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

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

这里发生了什么奇迹？

Webpack通过缩小和绑定我的供应商来创建

vendor.bundle.js

现在在全局上下文中执行的文件

Webpack使用其所有应用程序代码创建

bundle.js

---

条目文件（本例中为app.jsx）

这个脚本只是使用jQuery、Bootstrap、Tether和wowjs的定制JavaScript。它在vendor.bundle.js之后执行，允许它成功运行

我试图执行

script.js

时犯的一个错误是，我认为它必须在全局上下文中。所以我用脚本加载器像这样导入它：

import./script loader！脚本'。最后，您不需要这样做，因为如果您通过条目文件进行导入，那么不管怎样，它最终都会在bundle文件中


一切都很好。
感谢@Ivan的
脚本加载程序
建议。我还注意到，
commonchunkplugin
正在拉取非小型供应商版本，因此我将
uglify loader
链接到流程中

尽管如此，我确实相信一些
.min.js
是以不同的方式创建的，以消除额外的膨胀。虽然这是我要弄清楚的。谢谢
 使用官方教程中的htmlWebpackPlugin并切换订单条目键。（供应商然后应用程序）

在webpack.config.js中

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

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

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

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

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


这对我有用

按字母顺序有错吗？这样做是有目的的，因此订单不会影响内容。“因为Chrome开发工具告诉我存在依赖性问题。”---有详细信息吗？@zerkms好吧，如果按字母顺序进行，会有很大的问题。其中一个原因是，引导需要先加载jQuery和Tether，否则它无法正常运行。捆绑包中的放置顺序不会以任何方式影响它们在运行时的加载顺序。您遇到的问题是由其他原因引起的。非常有趣的是，我使用了
脚本加载程序
，它错误地绑定了所有内容。我决定用git克隆各种React样板和示例来测试
脚本加载器
、
CommonChunkPlugin
和
导入/要求
语句，但它们都属于同一个问题。因此我严格使用
脚本加载器
，它肯定能工作，但最终结果是一个捆绑文件和我所有的JS。我希望避免使用1个大文件，因为通过异步加载2个小文件（1个供应商libs和1个应用程序）会更理想。我将继续使用脚本加载器进行拆分/分块的实验，看看我是否能做到这一点result@OllieCee从必须定义全局变量并在所有其他绑定之前单独加载的库中创建一个单独的绑定并不困难。当然，您将对其他捆绑包中的jquery等具有隐式（无
require
或
import
）依赖关系更新链接：或：