Development vs Production modes.

When you ran the code from the previous tutorial you might notice this message:
WARNING in configuration
The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.

Webpack 4 is coming with two predefined modes: “development” and “production” and automatically optimize the code for the corresponding build.
To enable the corresponding mode we simply need to call Webpack with –mode development or –mode production parameter.
Let’s go to package.json and add ‘build’ script in so we could call it with npm without passing all parameters:

./package.json

  "scripts": {
    "build": "rm -rf ./dist && webpack --mode development ./src/app.js -o ./dist/main-bundle.js"
  }

Let’s execute the script that we just added and create a new bundle.

yarn build

But why stopping there? We could configure Webpack with no parameters at all. Just passing –mode.

Setting Webpack with Zero config

Webpack by default will look for entry point in ./src/index.js and will output the bundle in ./dist/main.js

Change the script section in package.json as follows.

"scripts": {
  "clean": "rm -rf ./dist",
  "build": "webpack --mode development"
},

what we just did:
– we added a clean up script (line 2) that will take care of deleting the old bundle once executed.
– we added ‘build’ script, with almost 0 config parameters.

Now if we rename src/app.js to src/index.js Webpack will pick it ot automatically and will output the bundle code in dist/main.js

We also removed ‘rm -rf’ and added it into another script called clean.
Now in the console in the root of the project if we do:

yarn run clean
yarn run v1.3.2
$ rm -rf ./dist
✨ Done in 0.11s.
$ yarn run build
yarn run v1.3.2
$ rm -rf ./dist && webpack –mode development ./src/app.js -o ./dist/main-bundle.js
Hash: 3e7c9702fe472d8df3d2
Version: webpack 4.16.3
Time: 98ms
Built at: 08/01/2018 4:10:30 PM
Asset Size Chunks Chunk Names
main-bundle.js 4.48 KiB main [emitted] main
Entrypoint main = main-bundle.js
[./src/app.js] 55 bytes {main} [built]
[./src/test.js] 69 bytes {main} [built]
✨ Done in 1.06s.

We well see that Webpack prepared a bundle for us with Zero Config parameters.

Setting Webpack override

The Zero Config was great but if the complexity of the project grows, we will need to customize Webpack so let’s revert the changes back.
– Rename src/index.js back to src/app.js
– Change the scripts parameters in package.json to look like this:

"scripts": {
  "clean": "rm -rf ./dist",
  "build-dev": "webpack --mode development ./src/app.js -o ./dist/main-bundle.js",
  "build-prod": "webpack --mode production ./src/app.js -o ./dist/main-bundle.js"
},

What we just did:
– We added back “clean” script to remove ./dist folder.
– We added “build-dev” and “build-prod” build scripts.

Let’s give it a try. From the terminal run:

yarn clean

This will get rid of the ./dist folder.

yarn build-dev

and look at ./dist/main-bundle.js Nothing unusual there. The main-bundle.js was re-created.

Let’s check the production build script. Run:

yarn build-prod

now it gets interesting, if you look at ./dist/main-bundle.js you will notice that it is minified and prepared for production use. Webpack also uses UglifyJSPlugin when “–mode” is set up to “production”.

Now you have production build ready!

 What is far from true is that this is really production ready but we will figure out this later in this tutorial.