webpack-dev-server Cannot find module 'webpack'

Question

I'm trying to use webpack-dev-server to run a simple program but I'm getting this error:

module.js:471
    throw err;
    ^

Error: Cannot find module 'webpack'
    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> 
    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)

I have installed webpack with following npm command

npm install --save-dev webpack

and I have the following configuration:

(webpack.config.js)
var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'client/public');
var APP_DIR = path.resolve(__dirname, 'client/app');

var config = {
  entery: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle,js',
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

module.exports = config;

I have tried everything and I'm really lost. Does anyone have any idea?

`entery` has a typo it should be `entry` (if that was copied directly from the webpack config) — redconservatory, Feb 16 '17 at 03:55
If someone is looking for an up to date Webpack 5 tutorial, check out this: https://www.robinwieruch.de/webpack-setup-tutorial/ — Robin Wieruch, Nov 18 '20 at 08:03

score 84 · Accepted Answer · edited Jul 10 '20 at 09:18

84

npm install --save-dev webpack is not enough.

You also have to install the following:

npm install --save-dev webpack-dev-server

And optionally, you can also install:

npm install --save-dev webpack-dev-middleware webpack-hot-middleware

edited Jul 10 '20 at 09:18

Romein77

29
4

answered Feb 15 '17 at 17:24

Abdennour TOUMI

64,884
28
201
207

5

i have reinstalled the webpack and the webpack-dev-server and it worked thanks! – yonBav Feb 18 '17 at 14:25
You are Welcome .. Try also to use `npm run build` instead of `npm build` and `npm run xxx` instead of `npm xxx` .. so on. – Abdennour TOUMI Feb 18 '17 at 14:26
When running the first line, I get the error : operation not permitted, mkdir 'C:\Windows\System32\WindowsPowerShell\v1.0\node_modules – Markus Sep 10 '19 at 08:22

score 14 · Answer 2 · answered Jul 01 '18 at 14:56

14

I had the same problem, but I resolved by installing additional webpack-cli

npm install --save-dev webpack-cli

answered Jul 01 '18 at 14:56

Hùng Ng Vi

971
2
11
18

score 0 · Answer 3 · answered Apr 18 '21 at 20:08

Try the following:

Firstly, you need to install webpack-dev-server

npm install --save-dev webpack-dev-server

Then in your package.json, use this in your start script:

"start": "webpack serve --config webpack.config.js --open"

Note webpack.config.js should be replaced with the file name of your webpack config file.

Now run npm start

Hope it works!

webpack-dev-server Cannot find module 'webpack'

3 Answers3

Linked