Your attention - Webpack 4

Hello! This time on the agenda is a translation of Valentino Gagliardi 's article “Webpack 4 tutorial: All You Need to Know, from 0 Conf to Production Mode” .



This time, the Webpack development team has worked hard on the new generation of the popular module builder (bundler) - webpack 4 .

The repository with the code used here.

Webpack 4 as a zero-configuration module builder

Nobody argues: it has powerful advantages, a large number of features and settings, but the configuration file is a headache.

Writing a config is not a problem for medium and large projects, without this it is difficult for them to exist. However, small projects can be annoying, especially if you want to create a toy application.

Sean and the webpack team have improved the lives of us all: webpack 4 no longer requires a default configuration file!

Well, test it.

Create a new directory and go there:

mkdir webpack-4-quickstart && cd $_

Initialize package.json:

npm init -y

Now we are launching webpack 4 (The version is now in beta, so you need to add next):

npm i webpack@next --save-dev

Add webpack-cli , living his life in a separate package:

npm i webpack-cli --save-dev

Open package.json and write the build script:

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

Save the file, close. Run:

npm run build

What happened?

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'

Webpack 4 is looking for the entry point of the application ./src ! If you don’t know why it happened, then I will describe briefly: the entry point is the file from which webpack starts building. In earlier versions, you had to declare it directly in webpack.config.js .

But starting from version 4 you do not need to specify an entry point. It will be taken from ./src/index.js by default!

Check it out. Create ./src/index.js :

console.log(`Можно я тут просто постою?`);

Run the build again:

npm run build

You will receive the file ~ / webpack-4 the quickstart-/ the dist / main.js .

Don't we really need to set an exit point too? Exactly! Neither the entry point nor the exit. Moreover, you do not need a configuration file .

I know that for most this is not surprising: the power of webpack in code splitting. But believe me: zero configuration speeds up development at times.

Production and development modes

Very often you can find splitting the config into several files.

A typical project may have:

• Configuration for development, with webpack-dev-server and other developer toys.
• Configuration for production with UglifyJSPlugin , source maps and more.

While large projects continue to use separation of configs, we with webpack 4 will do everything in one line.

How so? Meet the production and development modes .

If you pay attention to the output of npm run build , you will see a beautiful error:


The option 'mode' has not been set. Turn on the mode in 'development' or 'production' to apply the default settings.

What does it mean? We'll figure out. Open package.json and append the script object as shown below:

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

And now let's try:

npm run dev

Take a look at ./dist/main.js . What do you see? Yes, I know, a boring bundle ... not reduced. What if:

npm run build

Now what? The build file has been reduced. Yes! The 'production' mode uses all kinds of optimization on its own. And there is not only minimization.

On the other hand , development mode optimizes application speed and nothing more.

Thus, with the 4th webpack you can change the entire assembly in one line. Just add the --mode checkbox and get the result completely painless.

Do you like the innovations? What do you expect from webpack in the future? Write in the comments.

Thanks for attention.