bundle.jsが他のルートに読み込まれないのはなぜですか？

Question

webpack.common.jsファイルのwebpack3を使用してbundle.jsをロードし、以下のように出力します。

これは、リアクションフロントエンドで「/」ルートをヒットしたときにうまく動作します。私のリアクションルーターはうまく動作し、必要に応じてURLを変更すると期待通りにアプリの周りをナビゲートします。

しかし、私が '/'以外のURLでブラウザをリロードすると、bundle.jsは自動的には挿入されません。

私は、bundle.jsを参照するindex.htmlテンプレートにscriptタグを入れました。これは、他のルート上の問題を修正します。

これは、bundle.jsが '/'ルートに2回読み込まれることを意味します。 webpackとscriptタグからも注入されます。

リロード時にbundle.jsがすべてのルートに注入されるようにするにはどうしたらよいですか？また、テンプレートのスクリプトタグを保持してwebpack 3がbundle.jsを自動的に注入しないようにするにはどうすればよいですか？

entry: { 
    app: './client/src/index.jsx', 
    }, 
    output: { 
    filename: '[name].bundle.js', 
    path: path.resolve(__dirname + '/dist'), 
    publicPath: '/' 
    }, 
    plugins: [ 
    new CleanWebpackPlugin(['dist']), 
    new HtmlWebpackPlugin({ 
     title: 'Shopping', 
     template: './index.html', 
    }), 

プロジェクトはReactRouter 4およびサーバへのブラウザからのすべての呼び出しを使用しているが、このルートを打つ：

app.get('*', (req,res) =>{ 
    res.sendFile(path.resolve(__dirname, '../index.html')) 
}); 

Answer 1

は、私がここにhttps://stackoverflow.com/a/43704661/5086349解決策を見つけました。私は、テンプレート内のbundle.jsを参照しているタグを保持し、バンドル注入を停止しました。

<script type="text/javascript" src="/app.bundle.js"></script> 

ウェブパックの共通点を少し変更しました。

output: { 
    filename: '[name].bundle.js', 
    path: path.resolve(__dirname + '/dist'), 
    publicPath: '/' 
    }, 
    plugins: [ 
    new CleanWebpackPlugin(['dist']), 
    new HtmlWebpackPlugin({ 


     // Set inject to false. 
     inject: false, 


     title: 'Shopping', 
     template: './index.html', 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new ServiceWorkerWebpackPlugin({ 
     entry: path.join(__dirname, './client/components/user/sw.js'), 
    }), 
    ],