19
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

webpackのdistとsrcフォルダの違い。dist配下のファイルはいつ作成されるか

Posted at

webpackのdistとsrcが実際の操作でどう使われるかについて。

webpackで作成したプロジェクトの基本構造は下記。

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

distとsrcが存在する。
・distは配信用(distribution)。本番環境で実際にブラウザに表示されるもの。

・srcは編集用(source)。プログラムを記述する。

##serveとbuild
ここからが本題。
一般的にpackage.jsonに以下のような記述がある。

package.json
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "serve": "webpack-dev-server --config webpack.config.js --open"
  },

オプションで細かい設定がしてあるのは無視して、buildとserve(またはstart)。

buildをするとファイルをリロードして、serveするとlocalhostのブラウザが立ち上がるんだ〜。程度の軽い理解だったが、もう少し踏み込む必要がある。

###・npm run serve
serveを実行すると、localhostが立ち上がる。つまり、開発環境が立ち上がる

この時、ブラウザに表示される画面はsrc内のファイルを使用している。

distは関係なく。serveを実行しても配信用のファイルを自動生成しない


###・`npm run build` **buildを実行するとsrcのファイルを元に、dist配下に配信用のファイルを生成する**。

つまり、buildは本番環境の構築となる。


##まとめ
alias 内容 使用するファイル
serve(or start) 開発環境の起動 src
build 本番環境用ファイルの作成 src -> dist
19
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?