Webpack: After installing webpack and webpack-cli still getting error when running webpack

webpack webpack-4
Taylor Austin picture Taylor Austin · Feb 26, 2018 · Viewed 23k times · Source

I have the latest versions of webpack installed:

"webpack": "^4.0.0",
"webpack-cli": "^2.0.9"

Yet when I run webpack in the terminal I get the following:

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

Answer

Carloluis picture Carloluis · Mar 9, 2018

Seems that you had installed globally only webpack and not webpack-cli.

Therefore, npm install -g webpack-cli solves the issue.

Explanation and alternative solutions:

Why there is the problem in the first place? The following indicates that both webpack and webpack-cli packages are locally installed:

I have the latest versions of webpack installed:

   "webpack": "^4.0.0",
   "webpack-cli": "^2.0.9"

Running webpack in your terminal cannot find your locally installed version (provided by webpack-cli since ). That's because your locals executables folder aren't included in your shell PATH variable (list of directories in which the shell looks for commands). The path where npm install executables locally is ./node_modules/.bin (more info here).

Therefore, instead of try running just webpack you need to run:

./node_modules/.bin/webpack

Also, adding to your package.json a script which use just webpack works because npm adds local ./node_modules/.bin/ directory to the shell path before it executes scripts (see npm run).

"scripts": {
    "build": "webpack"
}

Then, execute in your terminal: npm run build

In recap, I think the package.json script is the more clear and desirable way to go.

Related questions

Webpack 4 - create vendor chunk

In a webpack 3 configuration I would use the code below to create separate vendor.js chunk: entry: { client: ['./client.js'], vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], }, output: { filename: '[name].[chunkhash].bundle.js', path: '../dist', chunkFilename: '[name].[chunkhash].…

Read More
Webpack 4 - How to configure minimize?

Webpack 4 comes with the following statement: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. Fair enough, but I cannot find any information about configuring the UglifyJsPlugin instance running under the hood, for example to change the …

Read More
Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

I was trying to run webpack-4 first time webpack ./src/js/app.js ./dist/app.bundle.js it shows warning / error : WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set …

Read More