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.
A details description of upgrade to webpack 4,that might be helpful
This is why webpack exists. It's a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.
There are some alternatives to Webpack that provide the same functionality as webpack. These alternatives are gulp, babel, parcel, browserify, grunt, npm, and requireJS.
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
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 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 bundlesdevelopment
enables useful error messages and is optimized for speednone
is a hidden mode which disables everythingRead more on release notes & changelog
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With