web-dev-qa-db-ja.com

Webpackが間違った順序でファイルをバンドルする（CommonsChunkPlugin）

私が欲しいのは、WebpackのCommonsChunkPluginを介して特定の順序でJavaScriptベンダーファイルをバンドルすることです。

WebpackにはCommonsChunkPluginを使用しています。 公式ドキュメント の使用法は簡単で簡単です。意図したとおりに動作しますが、プラグインがファイルをアルファベット順にバンドルしていると思います（間違っている可能性があります）。プラグインがバンドルされる順序を指定するオプションはありません。

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

ここでは2つのことが行われています。

  1. vendor.bundle.jsには、bootstrap、jquery、tether、wowjs
  2. bundle.jsは私のアプリケーションの残りを含みます

バンドル注文：
correct：jquery、tether、bootstrap、wowjs
不正解：bootstrap、jquery、tether、wowjs

私のwebpack.config.jsに注意してください。私はそれらを正確に注文しましたが、incorrect順序。ランダムに並べ替えても、結果は同じです。

Webpackを使用してアプリケーションをビルドした後、vendor.bundle.jsは、間違った順序を表示します。

それらが誤ってバンドルされていることはわかっています。Chrome Dev。Toolsは依存関係の問題があると教えてくれます。ツールと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');

結果？
ブートストラップ> jQuery> Tether> wowjs

ベンダーファイルを正しい順序で読み込むにはどうすればよいですか？

javascriptwebpackwebpack-2uglifyjs
18
Ollie Cee

https://webpack.js.org/guides/shimming/#script-loader を試すことができます-これは、順番にグローバルなコンテキストでスクリプトを実行するように見えます。

7
Ivan

成功！

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';のようなスクリプトローダーでインポートしました。最終的に、エントリファイルを使用してインポートする場合は、バンドルファイルに関係なく最終的にインポートされるため、必要はありません。

すべてがすべて良好です。

script-loaderの提案をありがとう@Ivan。また、CommonsChunkPluginが縮小されていないベンダーバージョンをプルしていることに気づいたので、uglify-loaderをプロセスにチェーンしました。

ただし、余分な膨張を取り除くために、いくつかの.min.jsが異なる方法で作成されていると思います。それは私が理解するためですが。ありがとう！

13
Ollie Cee

公式チュートリアルのhtmlWebpackPluginで作業し、注文フォームを切り替えましたentry key。 （ベンダー then アプリ）

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
2
que1326