JavaScript
webpack

webpack-dev-server でビルドファイルが読み込まれない

webpack-dev-server を使おうと思ったら、なぜかビルドファイルがブラウザに反映されない。

まず気付いたのは、output に指定してるディレクトリに実ファイルが出力されてない。
が、これはそういうものらしく、webpack-dev-server でビルドされたファイルはメモリ上に(?)展開されてるらしい。

結局原因は config で、webpack-dev-server 用のパスを指定してあげないといけないことだった。
デフォルトでは / となっているため、output ディレクトリとして別のディレクトリを指定している場合は要設定。

例えば output で dist/assets/scripts を指定してる場合はこんな感じ。

devServer: {
  contentBase: path.join(__dirname, "dist"),
  publicPath: '/assets/scripts/'
}