Webpack command throws error: Cannot find module 'webpack'

I am working on a web app. I use Vue.js for my frontend, and I found the webpack is required, so I installed it globaly, but whenever I run the 'webpack' command I get ths error:

C:\Users\compac\node_modules\webpack-cli\bin\webpack.js:242
                            throw err;
                            ^
Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (C:\Users\compac\node_modules\v8-compile-cache\v8-compile- 
cache.js:159:20)
at Object.<anonymous> (C:\Users\compac\node_modules\webpack-cli\bin\convert- 
argv.js:7:24)
at Module._compile (C:\Users\compac\node_modules\v8-compile-cache\v8- 
compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at yargs.parse (C:\Users\compac\node_modules\webpack- 
cli\bin\webpack.js:239:14)
at Object.parse (C:\Users\compac\node_modules\yargs\yargs.js:543:18)
at C:\Users\compac\node_modules\webpack-cli\bin\webpack.js:217:8
at Object.<anonymous> (C:\Users\compac\node_modules\webpack- 
cli\bin\webpack.js:512:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> 
(C:\Users\compac\AppData\Roaming\npm\node_modules\webpack\bin\ 
webpack.js:12:2)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)

I couldn't understand what the problem is, here is my package.json

{
"name": "web_coding_challenge_python",
"version": "1.0.0",
"description": "",
"main": "App.js",
"author": "",
"license": "ISC",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
"dependencies": {
"lodash": "^4.17.4",
"vue": "^2.3.3",
"vue-resource": "^1.3.4"
 },
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.6.1",
"babel-runtime": "^6.26.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.3.3",
"webpack": "^4.2.0"
}
}

and I have the following configuration

var path = require('path')
var webpack = require('webpack')

module.exports = {
entry: './static/js/App.js',
output: {
path: path.resolve(__dirname, './static/public'),
publicPath: '/static/public/',
filename: 'bundle.js'
},
module: {
rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
      }
      // other vue-loader options go here
    }
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  },
  {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  }
]
},
performance: {
hints: false
 },
 devtool: '#eval-source-map'
 }

 if (process.env.NODE_ENV === 'production')
 {
 module.exports.devtool = '#source-map'

module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: '"production"'
  }
}),
new webpack.optimize.UglifyJsPlugin({
  sourceMap: true,
  compress: {
    warnings: false
  }
}),
new webpack.LoaderOptionsPlugin({
  minimize: true
})
 ])
}