32

I am following the tutorial exactly as given here . But I am amazed that the docs seems outdated. e.g

npx webpack src/index.js dist/bundle.js fails with:

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

If I install webpack-cli and try again I see this error:

Hash: af9bc06fd641eb0ffd1e Version: webpack 4.0.0 Time: 3865ms Built at: 2018-2-26 05:10:45 1 asset Entrypoint main = main.js 1 (webpack)/buildin/module.js 519 bytes {0} [built] 2 (webpack)/buildin/global.js 509 bytes {0} [built] [3] ./src/index.js 212 bytes {0} [built] [4] multi ./src/index.js dist/bundle.js 40 bytes {0} [built] + 1 hidden module

WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in multi ./src/index.js dist/bundle.js Module not found: Error: Can't resolve 'dist/bundle.js' in '/var/app/webpack_demo' @ multi ./src/index.js dist/bundle.js

I hope I am not doing something crazy, given the popularity of webpack the documentation should reflect the actual behavior. Let me know if I am doing something wrong.

Edit

A details description of upgrade to webpack 4,that might be helpful

sakhunzai
  • 13,900
  • 23
  • 98
  • 159
  • 4
    Looks like the documentation is still stuck at webpack 3 – Agney Feb 26 '18 at 05:25
  • Do some research and maybe try compacting your question. The warning, for instance, is not causing your problem. https://www.codementor.io/valentino/webpack-4-tutorial-all-you-need-to-know-from-0-conf-to-production-mode-g4lpnr47v – Raydot Feb 27 '18 at 20:24
  • @DaveKaye , your comments does not make any sense, the docs should reflect the latest changes to the webpack otherwise those are misleading and waste of time , specially for beginner. Even they does not mention which version the docs are addressing. – sakhunzai Feb 28 '18 at 04:20
  • @sakhunzi let me try again: Are you asking how to fix the error or commenting on the fact that the documentation isn't up-to-date (which isn't a question)? With a little research -- can't always trust what a tutorial tells you -- it's not hard to find up-to-date documentation: https://webpack.js.org/ – Raydot Feb 28 '18 at 20:10
  • 2
    You can also check this [webpack-4-demo](https://github.com/carloluis/webpack-demo) project. Hope it helps! – Carloluis Mar 06 '18 at 01:35
  • a related discussion https://news.ycombinator.com/item?id=16615275 – sakhunzai Mar 19 '18 at 05:43
  • 2
    There is still no mode in configuration page, and it's 4.5.0 now :) – Tien Do Apr 05 '18 at 04:00
  • Does this answer your question? [How to set mode to development or production in the config file?](https://stackoverflow.com/questions/49242756/how-to-set-mode-to-development-or-production-in-the-config-file) – KyleMit Dec 28 '20 at 19:25

6 Answers6

49

You can pass mode param in the webpack config or cli command.

Config: mode: 'development' or mode: 'production'

CLI: webpack --mode development or webpack --mode production

Iurii Budnikov
  • 970
  • 1
  • 8
  • 12
14

The Webpack team is working on updating the package docs asap. New guides and docs are available in the webpack.js.org official site.

In the meantime, You can also read related posts on medium:

Check on GitHub this Webpack-Demo project intended to be a Webpack 4 tutorial. Previous and others links to helpful resources used in the webpack configs are included in the project's Readme. It has two zero-config builds (using the new webpack mode option which includes a sets of defaults), and another two using custom configs.

Since , the CLI has been move to webpack-cli therefore you need to install also this package in your devDependencies. Also, expect the new mode configuration to be set either on the CLI run or the config object.

CLI usage in your npm scripts:

"scripts": {
    "dev": "webpack --mode development",
    "prod": "webpack --mode production"
}

Set mode property in your webpack config object:

{
    mode: 'production' // | 'development' | 'none'
}

If mode value isn't specified, webpack uses the production value (defaulted option). But warns you in the output with:

WARNING in configuration

The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

Webpack mode reduce the required configuration for an useful build by using a set of defaults (default values for configuration properties depending the mode value):

  • production enables all kind of optimizations to generate optimized bundles
  • development enables useful error messages and is optimized for speed
  • none is a hidden mode which disables everything

Read more on release notes & changelog

Community
  • 1
  • 1
Carloluis
  • 4,205
  • 1
  • 20
  • 25
8

Got the same issue and after a bit of research found its a problem to be fixed as you can see on this Github thread

One of the options:

Inside package.json set scripts to either development or production mode

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

And now when you run npm run dev it will give you bundle.js but not minified.

But when you run npm run build it will give you a minified bundle

Community
  • 1
  • 1
Aaqib
  • 9,942
  • 4
  • 21
  • 30
5

It will be updated very soon, see this link for information

We are very close to having out Migration Guide and v4 Docs Additions complete! To track the progress, or give a helping hand, please stop by our documentation repository, checkout the next branch, and help out!

C.N
  • 218
  • 1
  • 9
1

Webpack 4 docs are not ready yet. I recently migrated from webpack 3 to 4 and it took me quite some time to figure out all the issues.

Here'a my sample repo you can use as reference for migrating from webpack 3 to 4.

https://github.com/flexdinesh/react-redux-boilerplate

There's one commit specific for migration. Take a look at that for more info.

Dinesh Pandiyan
  • 5,814
  • 2
  • 30
  • 49
0

In webpack config file:

const isProd = process.env.NODE_ENV === 'production';
module.exports = {
  ***
  mode: isProd ? 'production' : 'development'
  ***
};

In package.json:

***
"scripts": {
   "dev": "node ./app.js",
   "prod": "cross-env NODE_ENV=production npm run dev",
   ***
},
***
"dependencies": {
   "cross-env": "^7.0.2",
   ***
}
***
Max
  • 27
  • 2
  • 8