webpack起動時のエラー原因を教えてください

Question

下記のファイルよりターミナルにて yarn run build を実行したらエラーになります。

成功すれば public フォルダ内に bundle.js が作成されるのですがエラーでされません..

■ファイル
Package.json
webpack.config.js

■エラー内容
error Command failed with exit code 1.

■目的
./src/app.js にあるapp.jsをpubulicフォルダ配下にbundle.jsを作成したいです。

{
  "name": "indecision-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack --watch",
    "build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
  },
  "dependencies": {
    "babel-cli": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "live-server": "^1.2.0",
    "webpack": "4.42.1"
  }
}

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  }
};

↓コマンド実行後のエラーです

Myuserpc:indecision-app Myuser$ yarn run build
yarn run v1.22.4
$ webpack --watch

webpack not installed

Install webpack to start bundling: 
 $ yarn add webpack --dev

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

■試したこと
webpackがバージョン4なのでWebpack.config.jsを下記のように書き換えましたが同じくエラーが出てきました...
※mode: を追記しました。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  // 出力の設定
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  }
};

何かエラー原因を解決できるヒントがありましたら教えてください。
よろしくお願い致します。

Comments

[hoshi-takanori]

yarn install しましたか？ あと、webpack-cli も必要な気がします。

[sasayaka_p]

ありがとうございます！
yarnはインストール済みでしたが、webpack-cilがインストールされていませんでした。

yarn add webpack@latest webpack-cli@latest
にてインストールし、解決できました。

Answer 1

yarn add webpack@latest webpack-cli@latest

実行後、webpack.config.jsにmode: 'development'を追記し、
webpackを起動できるようになりました