ベースURLをwebpack-dev-serverのcontentBaseにマップする方法

Question

これはwebpack-dev-server（2.4.5）でどのように実現できるのかわかりません。

マイアプリのベースURLはbundle.js含むhttp://localhost:3001/app

すべての静的な資産は、プロジェクトの下のフォルダ「/ DIST」に置かれています。

次の設定がありましたが、画像が見つかりませんでした。

devServer: { 
    publicPath: '/app', 
    contentBase: '/dist' 
} 

静的資産のすべての要求もbaseUrlに従います。例えば http://localhost:3001/app/image1.jpg

プロジェクト内にフォルダ「アプリ」が存在しないため、画像が見つからないと思います。

プロジェクトのディレクトリを変更せずにこの目標を達成する方法を教えてもらえますか？または、webpackがbaseUrlをcontentBaseにマップできる方法はありますか？

Answer 1

devServer.publicPathはoutput.publicPathと同じにする必要があります。だからあなたの設定には、おそらくこれを持っている必要があります。

output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist/app/'), 
    publicPath: '/app/' 
} 

はWebPACKの-devのサーバーも、どこからの出力ファイルを提供するかを決定するためにそれを使用して、publicPathからヒントを取ります。 https://webpack.js.org/configuration/output/#output-publicpath