For your attention - Webpack 4

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



This time the Webpack development team worked a lot on the new generation of the popular module builder (bandler) - webpack 4 .
')
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 all of us: webpack 4 no longer requires a default configuration file!

Well, we will test.

Create a new directory and go there:

mkdir webpack-4-quickstart && cd $_ 

Initialize package.json:

 npm init -y 

Now let webpack 4 go into battle (The version is currently in beta, so you need to add next):

 npm i webpack@next --save-dev 

Add webpack-cli , living its 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 an entry point for the application ./src ! If you do not know why it happened, then I will describe briefly: the entry point is the file from which the webpack starts the build. 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 input 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 get a ~ / webpack-4-quickstart / dist / main.js file .

Do we not need to set the exit point too? Exactly! No entry point, no exit. Moreover, do not need a configuration file .

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

Production and development modes

Very often you can find the separation of the config into several files.

A typical project might have:

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

As long as major projects continue to use the configuration of configs, we with webpack 4 will do everything in one line.

How so? Meet the modes of production and development .

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


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

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

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

And now we will try:

 npm run dev 

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

 npm run build 

Now what? Assembly 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 the speed of the application and nothing else.

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 innovations? What do you expect from a webpack in the future? Write in the comments.

Thanks for attention.