サードパーティのjsファイルをWebpackバンドルに追加するにはどうすればよいですか？

Question

私はWebpackを初めて使っていて、stackoverflowで同様の記事を読んでいますが、彼らは私を助けませんでした。私は、ファイルを正常にbundle.jsが、同様に他のファイルを追加するモジュールであるというのが私のjsファイルを追加しました：

<script src="~/Scripts/jquery-3.2.1.js"></script> 
<script src="~/Scripts/dx.all.js"></script> 
<script src="~/Scripts/go-1.7.11.js"></script> 

私は彼らが輸入句を使用して追加することができますどのように？エントリ.tsファイルまたはwebpack.config.jsファイルにそれらを追加する必要がありますか？

私は次のことを試してみたが、それは動作しません：

エントリはファイルを.TS：

import './../Scripts/jquery-3.2.1.js'; 
import './../Scripts/dx.all.debug.js'; 
import './../Scripts/go-1.7.11.js'; 

import { Caller } from './Caller'; 

window.onload =() => { 
    let caller: Caller = new Caller(); 
    caller.execute(); 
}; 

はUPDATE：

1）webpack.config.js：

module.exports = { 
    entry: './Main.js', 
    output: { 
     filename: 'bundle.js' 
    } 
}; 

2）他のすべての.jsファイルは、Main.jsファイルと同じフォルダに置かれます。私たちは、特定の修正と一緒に行く前に

Answer 1

、ここWebPACKの

1. の一般的な概念があるのWebPACKはWebPACKの実行時に、それが依存関係グラフを構築し、entryからentryポイントとoutput場所
2. を必要と
3. Webpackは従属グラフのすべてのリソースを処理します
4. loadersは、リソース（js、css、tsなど）に固有の処理を実行するように構成することができます
の
5. に処理リソースがあなたの質問に来るoutput場所

に配置されます、1は、典型的には、その機能に必要な場所にソースファイル内require("./resource");またはimportを使用しています。 webpack.config.jsにはありません。先に述べたように、すべてのwebpackのニーズはentryです。エントリリソースは依存関係を宣言する必要があります。

1. entryがwebpack.config.js
2. で正しく設定されていることを確認し、あなたが適切なソースファイルでrequire("")またはimportを使用してjsの他のファイルを追加していることを確認してください：この問題を解決するために

   。エントリ内のimportsは、パスが比較的正確であれば正常です。

それでも問題が解決しない場合は、あなたの

• webpack.config.js
• フォルダ構造

を含めるようにOPを編集してください。

更新： TypeScriptコードを使用しようとしていますが、もう一度Webpackがそれについて何も知りません。そこにはタイプコピーの設定はありません。 Webpackはtypescriptをjavascriptに変換することができ、よく文書化されているhereです。

前述のように、loadersは、リソースタイプに基づいて重い持ち上げを行います。 babel-loaderで試してみることをお勧めします。

また、依存関係がソースjs/tsファイルで明確に定義されていることを確認してください。 entryファイル（Main.js）は、必要なすべてのモジュールを（importまたはrequireを使用して）依存関係として持つ必要があります。あなたの投稿からは、どのようにとの依存関係があるのか​​わかりませんentry.ts