webpack-dev-serverと同じポートに任意のアセットを配信

Question

webpack-dev-serverで任意のアセットを配信する最良の方法は何ですか？

webpack-dev-serverでバンドルされている資産と、同じ住所のディレクトリにある画像のような資産をすべてサーバーすることができます。これはどのようなパターンですか？

ありがとうございます！

Answer 1

あなたのビルド出力ディレクトリにファイルをコピーしますCopyWebpackPluginを、使用、およびWebPACKの-devのサーバーで動作することができます

var CopyWebpackPlugin = require('copy-webpack-plugin'); 
//... later in plugins[] 
new CopyWebpackPlugin([ 
    { // copy all contents of 'public' folder over to output directory 
     from: 'src/public' 
    } 
], 

あなたには、いくつかの理由でそれを行うにはしたくなかった場合、 （webpack.config.jsに「エントリー」、「プラグインなどと一緒に）トップレベルを使用して別のディレクトリにある特定のパスにできたプロキシ要求devServer設定：

devServer: { 
    port: 5001, 
    quiet: false, 
    stats: { color: true }, 
    proxy: { 
     "/api/*": { 
      target: 'http://localhost:5000', 
      secure: false, 
      changeOrigin: true, 
      ignorePath: false, 
     }, 
    } 
}, 

これは私のユースケースのためにあります、/ api/geで始まるURLに行くポート5001上で実行されているwebpack-dev-serverへのリクエスト同じパスを使用してポート5000上で実行されているWebサーバーにプロキシします。私。 webpack-dev-serverで実行されているページから '/ api/values'を呼び出すと、リクエストは 'http://localhost:5000/api/values'に代理されます