vue-cli webpack simpleのなかのnpm run buildとは？

Question

vue-cli webpack simpleのなかのnpm run buildとは一体どのようなことをするコマンドなのでしょうか？
しらべてみたのですがMin化とかしか書いてなく具体的にはわかりませんでした。
どのようなことをするコマンドなのか教えてください

Answer 1

まず npm run *** は package.json の中の scripts フィールドに定義されているスクリプトを実行するコマンドです。これを使うと何が良いのか挙げると、プロジェクトディレクトリ以下の node_modules/.bin/ ディレクトリを PATH に追加して実行してくれるので コマンドを実行するときに node_modules/.bin/webpack などのように書かなくて済む点や、何度も使うコマンドを簡単に使えるようにしておくことで利便性を上げられるという点などが挙げられます。

さて、 webpack-simple テンプレートの package.json を見てみると、下記のように書かれている部分があると思います。

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

npm run build を実行すると、cross-env NODE_ENV=production webpack --progress --hide-modules というコマンドが実行されるわけです。

cross-env は OS を考慮して環境変数をセット、その状態で指定したコマンドを実行してくれる便利なコマンドです。

この場合ですと、NODE_ENV という環境変数に production を代入して、その状態で webpack --progress --hide-modules コマンドを実行するという流れになります。

Comments

[Nippun]

ありがとうございます。
webpack --progress --hide-modulesはどのような動きをするのですか？

[yhg]

webpack 自体の説明は長くなってしまうので勘弁してください。Qiita などで検索すれば何するものなのか書いてある記事があるのではないかと思います。色々とできますよ。

コマンドオプションについては、--progress はビルドの進捗を表示するオプション、--hide-modules はモジュールについての情報を隠すオプションです。
こちらの公式ドキュメントに webpack コマンドのオプションなどが載ってます。
https://webpack.js.org/api/cli/

[Nippun]

ありがとうございます