"webpack-dev-server" не является внутренней или внешней командой, как решить?

Question

[Виорел]

Привет всем, решил освоить webpack,
хотел разделить конфиг на модули
и при запуске yarn run start появляется ошибка
"webpack-dev-server" не является внутренней или внешней командой
у меня стоит windows 10
как решить задачу?

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()
            
        ])
    }
};

в 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"
  }
}

Comments

[Metkatinone]

Была такая же проблема, когда устанавливал модули через консоль ATOM. Все получилось, когда установил модули через консоль windows.

Answer 1

[Рамиль]

Установите webpack-dev-server глобально:
npm i -g webpack-dev-server

Comments

[Виорел]

Спасибо, за подсказку
я установил и webpack тоже глобально и все заработало)

Answer 2

[gaisdav]

Установил глобально, но теперь такая ошибка

$ npm run start

> webpack-app@1.0.0 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)

Продолжить устанавливать все глобально?

Comments

[gaisdav]

ошибка исчезла после переустановки всех зависимостей

Answer 3

[Mesuti]

На моем примере такая ошибка появилась из-за смены contentBase: './dist', на contentBase: './',
Плагин CleanWebpackPlugin начал очищать папку node-modules и половина плагинов сломались.
npm i не помогает, думает все установлено.

Надо удалить всю папку node-modules и написать
npm i

либо переустановить Webpack

npm uninstall webpack webpack-cli webpack-dev-server

 // Затем 

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