Docker で WebpackDevServer を実行する

2808 ワード
webpack docker テキストリンク
TL;DR Docker コンテナー内の webpack-dev-server へのサンプル プロジェクトは this repository にあります.

バックグラウンド



Docker コンテナーで webpack-dev-server を実行したい場合があります.
理由は次のようなものかもしれません
  • 特定の Node.js バージョンの Docker イメージを使用したい
  • 一連の docker-compose サービスでプロジェクトを開始したい

    • キーポイント



    Docker コンテナーで webpack-dev-server を実行するには、いくつかの重要なポイントがあります.

    0.0.0.0 の開発サーバーを実行する必要があります



    デフォルトでは、dev サーバーは 127.0.0.1 に対して実行され、ブラウザーで localshot:XXXX によるアクセスを有効にします.ただし、これは Docker コンテナーの外部にコンテンツを公開しません. 0.0.0.0 を聞く必要があります. Ref: What is the difference between 0.0.0.0, 127.0.0.1 and localhost?

    ...
  devServer: {
    compress: false,
    host: "0.0.0.0",
    port: 3000,
  },
...


    https://github.com/ku6ryo/WebpackDevServer-w-Docker/blob/master/webpack.config.js#L25

    単純な監視オプションが機能しない



    デフォルトでは、開発サーバーの watch option が有効になっており、ファイルが変更されるたびに自動的に再コンパイルおよびリロードされます.ただし、Docker コンテナーで実行する場合は機能しません. the poll option of webpack's watch option を使用する必要があります.

    ...
  watchOptions: {
    poll: 1000,
  }
...


    https://github.com/ku6ryo/WebpackDevServer-w-Docker/blob/master/webpack.config.js#L28

    それでおしまい!お役に立てれば :)
    [Android]Android用MVVMモード
    78.Wonderland(Kruskal MSTアルゴリズム)