Webpackを使ったプロジェクトのdistとsrcディレクトリの違い｜npm run serveとnpm run buildの違い

Webpackを使ったプロジェクトでは以下のように「dist」というディレクトリと「src」というディレクトリが生成されます。

ここではこれらの違いについてまとめています。

webpackで作成したプロジェクトの基本構造は下記のようになっています。

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- main.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

distとsrcの違い

Webpackにおけるdistとsrcディレクトリの違いは、distは配信用(distribution)で本番環境で実際にブラウザに表示されるファイルを置いておくディレクトリです。

一方、srcは編集用(source)で、コードなどのプログラムを記述するファイルを置いておくディレクトリです。

通常、編集するのはsrcにあるファイルのみで、distのファイルは編集しません。

srcのファイルをコンパイルするとその結果がdistディレクトリ配下にブラウザが実際に読み取る用として作成されます。