Webpackを使用して実行時にリソースをロードする方法はありますか？

Question

私は典型的なimport/require構文を使用して別のスクリプトファイルから参照したい設定項目を含む単一の.jsonファイルを持っています。現在、これらの依存関係を解決してバンドルするためにwebpackを使用しています。しかし、このファイルは実行時にロードしたいので、実行時にこのファイルを解決してロードできるローダーがあるかもしれないことを期待していました。これまで私は自分のニーズに正確に合致するものは見つけられませんでした。

例：私はmyconfig.jsonが解決し、実行時にロードしたいのですが、上記の例で

var jQuery = require('jQuery'); 
var sol = require('some-other-lib'); 
var myConfig = require('/real/production/url/myconfig.json'); 

console.log(myConfig.myFavoriteSetting); 

。

おそらく関連質問：

• how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
• Webpack - dynamic require and paths
• Require JS files dynamically on runtime using webpack

Answer 1

私が何をしたいことは、WebPACKのコードの分割require.ensureだと思います。あなたが保証するモジュールは別々のバンドルに入れられ、実行時に '確実に'実行されると、webpackランタイムは自動的にajaxによってバンドルを取得します。確実にするためのコールバック構文に注意してください。バンドルのロードが完了したらコールバックが実行されます。その時点で必要なモジュールを要求する必要があります。 .ensureはそれらが利用可能であることを確かめます。

コード分割はwebpackの主な機能の1つで、いつでも必要なものだけを読み込むことができます。複数のバンドルを最適化するためのプラグインなどもあります。

Answer 2

Webpack 2では、System.importを使用できます。プロミスAPIを使用します。 AFAIK、現在、ブラウザにasync/awaitコードを実行する方法はありません。私はBabelがES2015へのasync/transpaidしかできないので、Node（v6.x）の最新バージョンだけがそれを実行できると信じています。私は、翻訳されたコードがジェネレータを使用しているため、ブラウザーがそれをまだ理解できるとは思わない。

System.importの場合、一部の古いブラウザ（Internet Explorer 11以降）では、Promise APIをポリフィルする必要があります。そのためにpolyfill.ioをチェックしてください。

ブラウザで本当にasync/awaitを使用する場合は、ES2015用の完全なポリフィルを行うことができます。

Answer 3

ファイル（config.json）と同じケースがありました。私はその後Copy-Webpack-Plugin

new CopyWebpackPlugin([ 
    // Copy directory contents to {output}/ 
    { from: 'config.json' } 
    ]) 

でそれをコピーすることを決めた

、私のファイルは、出力ビルドディレクトリにありました。私は私のwebpack.configファイルで私のファイルを参照するために '見た目' プロパティを使用：

externals: { 
    'config': "require('./config.json')" 
    } 

私のjsファイルでconfig.jsonをロードした：

import config from 'config' 

'設定' 負荷が「（必要。 /config.json）は出力ビルドディレクトリにあります。

私はそれが難しいと知っていますが、私は私の問題の別の解決策を見つけられませんでした。たぶん誰かを助けるだろう。

EDIT

私はimport config from 'config'はそれなしでは理解できなかったので、構築するためにWebPACKのを使用する必要がありました。私は交換する理由です：

externals: { 
    './config.json': "require('./config.json')" 
    } 

と

var config = require('./config.json') //replace import config from 'config' 

のWebPACKがなければ、それは正しい道だからJavascriptがvar config = require('./config.json')を理解しています。

そして、私はWebPACKのでビルドするとき、それは「./config.json」を見require('./config.json')によって変化するので、それは私が似たものを探してきましたが、どのローダーを発見していない