"webpack-dev-server" is not an internal or external command, how to decide?

Question

webpack

Hello everyone, I decided to master webpack,
I wanted to split the config into modules
and when I run yarn run start I get the error
"webpack-dev-server" is not an internal or external command
, I have windows 10,
how to solve the problem?

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const devserver = require('./webpack/devserver');

const PATHS = {
    source: path.join(__dirname, 'src'),
    build: path.join(__dirname, 'build')
};

const common = merge([
    {
        entry: {
            'index': PATHS.source + '/pages/index/index.js',
            'blog': PATHS.source + '/pages/blog/blog.js'
        },
        output: {
            path: PATHS.build,
            filename: 'js/[name].js'
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                chunks: ['index', 'common'],
                template: PATHS.source + '/pages/index/index.html'
            }),
            new HtmlWebpackPlugin({
                filename: 'blog.html',
                chunks: ['blog', 'common'],
                template: PATHS.source + '/pages/blog/blog.html'
            })
        ]
    }
]);

module.exports = function(env) {
    if (env === 'production'){
        return merge([
            common;
            
        ]);
    }
    if (env === 'development'){
        return merge([
            common,
            devserver()
            
        ])
    }
};

registered in package.json

{
  "name": "yarn.dev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --env development",
    "build": "webpack --env production",
    "serv": "static build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "node-static": "^0.7.9",
    "webpack": "^2.5.0",
    "webpack-merge": "^4.1.0"
  }
}

Answer 1

Install webpack-dev-server globally:
npm i -g webpack-dev-server

Answer 2

Installed globally, but now this error

$ npm run start

> [email protected] start E:\gais\project_webpack\webpack-app
> webpack-dev-server --env development

module.js:471
    throw err;
    ^

Error: Cannot find module 'html-webpack-plugin'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (E:\gais\project_webpack\webpack-app\webpack.config.js:2:27)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

Continue installing everything globally?

Answer 3

In my example, such an error appeared due to changing contentBase: './dist' to contentBase: './', the CleanWebpackPlugin
plugin started cleaning the node-modules folder and half of the plugins broke. npm i doesn't help, thinks everything is installed. You need to delete the entire node-modules folder and write or reinstall Webpack

npm i

npm uninstall webpack webpack-cli webpack-dev-server

 // Затем 

npm i -D webpack webpack-cli webpack-dev-server