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

webpack-prograshi(プロぐらし)-kv General
記事内に広告が含まれていることがあります。

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ディレクトリ配下にブラウザが実際に読み取る用として作成されます。


タイトルとURLをコピーしました