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 |