Webpack Hot Module Reloadはバンドルする別のパスを指定します

Question

私は現時点では1ページのアプリケーションを作成しており、webpackを使用しています。

ホットモジュール交換プラグインは使いやすいようになりました。

私は問題にもかかわらず来ました。 bundle.jsファイルの場所を指定することはできないようです。私のindex.htmlファイルで

、私は、ビルドが完了すると、私は、サーバーとすべての罰金にアプリケーションをデプロイすることができ、次の

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

でbundle.jsスクリプトをロードします。

ただし、Hot Module Replacementプラグインを使用すると、app.bundle.jsはアプリケーションのルートにあります。

// production 

entry: [ 
    './src/project/scripts/entry.js' 
], 

output: { 
    path: path.join(__dirname, '/public/static/assets/script'), 
    filename: 'app.bundle.js', 
}, 

そしてHMRとdevのために、私はもちろん

entry: [ 
    './src/project/scripts/entry.js', 
    'webpack/hot/dev-server', 
    'webpack-dev-server/client?http://localhost:8080/' 
], 

output: { 
    path: path.join(__dirname, '/public/static/assets/script'), 
    filename: 'app.bundle.js' 
}, 

を次ていますので、以下ではHMRせずに、私は次のようしている、私の生産構成の場合

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

の作品私がdevを実行すると、パスがindex.htmlの '/static/assets/script/app.bundle.js'を指しているため、app.bundle.jsを見つけることができません。

HMRプラグインのapp.bundle.jsの場所を指定する方法はありますか？

Answer 1

方法があります。ファイル名にbundle.jsへのパスを追加します。

output: { 
    path: __dirname + '/public', 
    filename: 'static/assets/script/app.bundle.js' 
}