Issues with getting started with webpack 4

Question

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

Answer 1

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:

• webpack 4: mode and optimization
• webpack 4: released today!!

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 webpack-4, the CLI has been move to webpack-cli therefore you need to install also this package in your devDependencies. Also, webpack 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