Webpack dev-server - 更新されたアセットで静的ファイルを提供する方法？

Question

私の問題は、http://localhost:8080/webpack-dev-server/に行くとwebpackがディレクトリリストを提供できるということです。 devサーバーのパスを変更すると、バンドルに変更は加えられません。

私は非常に簡単なセットアップが欲しいです。アプリケーション内のすべてを取り出し、js変換を実行してからdistで配信します。 index.htmlはどのようにそれに当てはまりますか？

私は、以下のディレクトリ構造を持っている：私はすべて変換した後、「index.jsでバンドルを開始するとして解釈

const path = require('path') 

module.exports = { 
    entry: './app/index.js', 
    output: { 
     filename: 'bundle.js', 
     path: path.resolve(__dirname, 'dist'), 
     publicPath: '.', 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: 'babel-loader', 
       exclude: /(node_modules)/, 
      } 
     ] 
    }, 
    devServer: { 
     contentBase: path.join(__dirname, 'dist'), 
     compress: true, 
    } 
} 

：

app 
    index.js 
dist 
    bundle.js 
index.html 
webpack.config.js 

をそしてwebpack.configの内側に私はこれを持っていますjsファイルをbundle.jsというファイルに入れて、dist/に入れてください。そして、devサーバでそのdistフォルダのjsコンテンツを配信し、圧縮してください。

私が持っている切断は、これにどのようにしてindex.htmlがプレイされているかを理解しています。 私は相談しました：https://webpack.js.org/configuration/dev-server/#devserver。

のパスを.に変更すると、ディレクトリ一覧は表示されませんが、バンドルは更新されません。

tldr：

がどのように私はindex.htmlを指しますが、更新の資産を提供するためのdevのサーバーを有効にすることができますか？

最後に、考え出しました。

const path = require('path') 

module.exports = { 
    entry: './app/index.js', 
    output: { 
     filename: 'bundle.js', 
     path: path.resolve(__dirname, 'dist'), 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: 'babel-loader', 
       exclude: /(node_modules)/, 
      } 
     ] 
    }, 
    devServer: { 
     contentBase: 'dist', 
    } 
} 

私は気になっていたと言いたいと思いますが、それが機能するまでオプションをスパムしました。

Answer 1

contentBaseが./distの場合、そのディレクトリにはindex.htmlが存在すると予想されます。基本的にwebpack-dev-serverが静的​​ファイル（HTML、画像など）を探すディレクトリです。

バンドルに使用しているものと必ずしも同じである必要はありません。 output.pathは（AFAIK）はwebpack-dev-serverでさえ使用されていません。これはメモリからバンドルを構築して提供するためです。必要なのはoutput.filenameとoutput.publicPathです（私はWebpack v2でもオプションですが、パブリックパス自体を試してみると信じていますが）URLを使ってバンドルを要求することができます。