webpackの自動コード分割をビルド出力フォルダに対してモジュールをロードするように設定するにはどうすればよいですか？

Question

Webpack 2の自動コード分割を使用して、アプリケーションを複数の出力ファイルに分割しています。私webpack.config.jsファイルは次のとおりです。

const path = require('path'); 

module.exports = { 
    entry: './app.js', 
    output: { 
    filename: '[name].js', 
    path: path.join(__dirname, 'build'), 
    } 
} 

これは正しく、他のモジュールファイルと一緒にbuildフォルダに私のapp.jsファイルを作成します。ビルドディレクトリは、次のファイルがあります。

main.js 
0.js 

私の問題は、ときmain.js要求0.js、それは現在の位置からの相対ではなく、自分のアプリケーションのルートにそうするということです。だから、それは基本的にlocalhost:8000/0.jsをロードするときに、localhost:8000/build/0.jsをロードしようとしています。私のプロジェクトが、メインエントリーポイントのパスを基準にして分割モジュールを正しくロードするように、どのように設定できますか？

Answer 1

ルートディレクトリからモジュールをロードします。エントリポイントに__webpack_public_path__変数を宣言することによって、Webpackがロードされるフォルダを設定できます。だから、このシナリオのために、あなたが使用できます。

__webpack_public_path__ = 'build/'; 

のWebPACKは、buildフォルダからモジュールをロードします。しかし、これはまだルートとの相対的なものです。エントリポイントに対するスクリプトをロードするためのWebPACKを伝えるために、あなたは動的にあなたのエントリポイントスクリプトのディレクトリに__webpack_public_path__を設定することができます。

const scriptURL = document.currentScript.src; 
__webpack_public_path__ = scriptURL.slice(0, scriptURL.lastIndexOf('/') + 1); 

document.currentScriptwell supported in evergreen browsersですが、Internet Explorerでサポートされていません。

Answer 2

UPDATE：あなたは複数のエントリポイントを持っている場合

コード分割を使用すると、オンデマンドであなたのコードの一部をロードすることができ、この場合には、主に動作します。 （例えば、requestidlecallbackやsetTimeoutの場合は問題ありません）。

通常、設定のロジックを/にロードしたくないときにルーティングに使用されますが、にロードします。

だから、あなたが

// goes to `/settings` 
button.addEventListener('click',() => { 
    require.ensure([],() => { 
    require('./settings') 
    }) 
}) 

のようなものを追加することができますrequire.ensure()を確認しましたか？

webpackは、コードをrequire.ensure（）で静的に解析し、ここでモジュールをビルドして別のチャンクに追加します。この新しいチャンクは、jsonpを介してwebpackによって要求に応じてロードされます。デフォルトのWebPACKによって

https://webpack.js.org/guides/code-splitting-require/#require-ensure-