Webpack - どのように特定の順序で.jsファイルをマージ/ロードできますか？

Question

私はこれに対する答えをどこからでも探してきましたが、私はそれを見つけることができませんでした。

これは簡単な問題です。

require('script1.js'); 
require('script2.js'); 
require('script3.js'); 

- ：私は私のindex.js（JSX）でこれを持っている場合はIEで表示され、彼らがあるためにの.jsファイルをマージすることができるようにしたい、私は彼らがリストされている順序でロードされたいです

しかし、私が何を試しても、webpackは望む順番でロードするようです。これの明白な例は、jQueryを先にロードして前のスクリプトに$を公開できることです。しかし、私はちょうど私がかなり複雑なアプリケーションを構築しているので、これを一般的に行う方法を知りたいです。

私はこれが以前のどこかの答えではなかったと私はそれを逃したことを願っています...これは私をインサインドライブしています。私はGulp SASSで作業するのが慣れていて、ずっと簡単でした。

これは何か違いがある場合は、ReactJS/ReactDOMでこれを使用しています。

Answer 1

これは、require（およびWebpackも部分的にサポートするES2015のimport）がどのように機能するかについての基本的な誤解です。

手動でスクリプトの順序を維持する代わりに、require/importというポイントは、スクリプトの順序を手動で保守する必要がなくなります。

代わりに、各スクリプト（モジュール）はrequire/importで依存関係を宣言してから、環境（Webpack、あなたの場合）が依存関係グラフを作成し、ファイルが正しい順序でtrueの場合import、ライブバインディングの周りに賢いことがあります）。

あなたのjQueryの例は次のように動作します：jQueryのを必要とするスクリプト（モジュール）のいずれかが、この行います

var $ = require("jquery"); 

または

import $ from "jquery"; 

または類似

。

これにより、jQueryの主な機能は、そのモジュール内で$として利用可能になります。また、WebpackにそのモジュールにjQueryが必要であることを伝えます。したがって、正しい順序でスクリプトをロードして、それを実現します。

More in the Webpack Introduction。