【webpack】watch時にエラーが出て実行できない

前提・実現したいこと

これまでgulpを使っていたのですが、webpackを使おうと思い、このサイトを参考に設定をしていました。
https://www.expexp.jp/webpack/

コンパイルしたらjsとcssは別に出力するのが前提です。
↑これを実現させるためにいろんなサイトを見たのですが、上記のサイト以外ではうまくいきませんでした。

今後、autoprefixerやcssのminifyも追加する予定です。

発生している問題・エラーメッセージ

npm run buildでコンパイルは実行できるのですが、npm run watchでwatchしようとするとエラーが返ってきます。

buildはできるのにwatchだけ出来ない理由がわからず、、、ReferenceErrorでwebpackが無いと言われたり、、、完璧に詰まってしまいました。
ご教授のほどお願いいたします。

> myproject@ watch C:\Users\path\Documents\personal\private\test\webpack
> webpack --watch

C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\cli.js:244
                                throw err;
                                ^

ReferenceError: webpack is not defined
    at Object.<anonymous> (C:\Users\path\Documents\personal\private\test\webpack\webpack.config.js:50:7)
    at Module._compile (C:\Users\path\Documents\personal\private\test\webpack\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (C:\Users\path\Documents\personal\private\test\webpack\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\convert-argv.js:133:13)
    at requireConfig (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\convert-argv.js:135:6)
    at C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\convert-argv.js:140:15)
    at yargs.parse (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\cli.js:241:39)
    at Object.parse (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
    at C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\cli.js:219:8
    at Object.<anonymous> (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\cli.js:538:3)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack\bin\webpack.js:155:2)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myproject@ watch: `webpack --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myproject@ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\path\AppData\Roaming\npm-cache\_logs\2018-11-19T01_17_40_262Z-debug.log

package.json

{
	"name": "myproject",
	"scripts": {
	  "build": "webpack",
	  "watch": "webpack --watch"
	},
	"devDependencies": {
	  "@babel/core": "^7.0.0",
	  "@babel/preset-env": "^7.0.0",
	  "babel-loader": "^8.0.2",
	  "css-loader": "^1.0.0",
	  "node-sass": "^4.9.3",
	  "sass-loader": "^7.1.0",
	  "webpack": "^4.17.2",
	  "webpack-cli": "^3.1.0"
	},
	"dependencies": {
	  "jquery": "^3.3.1",
	  "mini-css-extract-plugin": "^0.4.2"
	}
  }

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	mode: 'development', //development or production
	entry: './src/js/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: './assets/js/bundle.js'
	},
	module: {
		// babel-loaderの設定
		rules: [
		{
			test: /.js$/,
			use: [
				{
					loader: 'babel-loader',
					options: {
						presets: [
							'@babel/preset-env'
						]
					}
				}
			],
			exclude: /node_modules/,
		},
		{
			test: /.(sa|sc|c)ss$/,
			use: [
					MiniCssExtractPlugin.loader,
				{
					loader: 'css-loader',
					options: {
						url: false,
						minimize: true,
					}
				},
				{
					loader: 'sass-loader'
				}
			]
		}
	]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: './assets/css/style.css'
		}),
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery'
		})
	]
};