WebPACKのエクスポート機能

Question

は、私はいくつかのjsファイルを持って、各ファイルには固有の名前を持つstandonlone機能である、と私は1つのバンドル内のすべてのこのファイルをパックしたいので、私は仕事と私です。このコード

module.exports = { 
    entry: { 
     app:[ 
      './file1.js', 
      './file2.js', 
      './file3.js', 
      './file4.js' 
     ], 
    }, 
    output: { 
     path: './dist/', 
     filename: '[name].bundle.js' 
    } 
}; 

を行います私のバンドルファイルを ".dist/app.bundle.js"

今私はバンドル内の関数を呼び出す必要があるHTML本体にいくつかのjsコードを持っています 私は関数 "functionA"を呼び出そうとすると私はブラウザのコンソールでこのメッセージを受け取ります。

Uncaught ReferenceError: functionA is not defined 

質問はどうやって私の機能をバンドルからエクスポートしてHTMLコードにインポートできますか？

Answer 1

エントリポイントファイルからアイテムをエクスポートしても、グローバルスコープで使用できるようにはなりません。あなたは二つの選択肢がある - のいずれか明示的にそうように、windowオブジェクトに機能を追加します。

window.functionA = functionA; 

やライブラリとして出力するビルドを設定します。どのように後者

// webpack.config.js - abridged 
module.exports = { 
    output: { 
     library: "myModule", 
     libraryTarget: "umd" 
    } 
}; 

を私は知りませんファイルの配列に設定されているエントリポイントとやりとりします。すべての関数をインポートしてオブジェクトに含まれているもの、またはそのようなものを再エクスポートする単一のエントリファイル（main.jsなど）を作成する必要があります。