What is Webpack

We tell you how the most famous bundler works and how to set up a basic project.

Webpack is the most popular JS assembler in the world. Its functions are easily extended with the help of third-party packages, so that Webpack can be forced to do almost anything. And if there was no ready-made plugin, thanks to the powerful API, you can write a solution for your unique case.

Basic usage

At a basic level, using Webpack is pretty simple. Imagine that our application has an application file.js with the functions needed to work:

function sayHello() {

  console.log(‘Hello!’)

}

function sayBye() {

  console.log(‘Bye!’)

}

// Exporting these functions,

// to use them elsewhere:

export { sayHello, say bye }

Copy

Now let’s create an index file.js, which will be used as an input point, and we will call the application functions in it:

import { sayHello, sayBye } from ‘./application’

sayHello()

sayBye()

Copy

💡

The input point is the file from which the execution of the program begins. It usually contains the logic of starting the application.

Configure Webpack so that it collects a single file with the application code.

To begin with, you should add Webpack to the list of application dependencies:

npm install –dev webpack webpack-cli

Copy

webpack is the main dependency that stores all the code needed for the bundler to work.

webpack is a cli wrapper for launching Webpack from the command line, Command Line Interface.

Now it is enough to create a simple webpack.config configuration file.js:

// path — embedded in Node.js module

const path = require(‘path’)

module.exports = {

  // Specifying the path to the input point:

entry: ‘./src/index.js’,

// We describe where the result of the work should be placed:

  output: {

    // The path to the directory (it is important to use path.resolve):

path: path.resolve(__dirname, ‘dist’),

// The name of the file with the assembly:

filename: ‘bundle.js’

  }

}

Copy

Almost done, it remains only to add the script for the build to the package.json and call it:

{

  “scripts”: {

    “build”: “webpack”

  }

}

Copy

npm run build

Copy

After execution, the bundle file will appear in the dist directory.js, which can already be connected to the page in the browser.

In the root of the project, you need to create an src folder, and in it a file index.html and connect the file with the assembly to it:

<!DOCTYPE html>

<html>

  <head>

    …

  </head>

  <body>

    …

    <script src=”./dist/bundle.js”></script>

  </body>

</html>

Copy

If you open this file in a browser, a greeting and farewell will appear in the console.

A greeting and farewell appear in the console.

Tracking changes in the project

The section of the article “Tracking changes in the project”

is not very convenient to restart the assembly after making each edit. Firstly, you will have to write a command in the terminal every time. Secondly, the complete assembly of large projects can take tens of minutes, and spending so much time every time is simply wasteful.

To solve this problem, you can use the incremental build mode, when Webpack tracks changes to source code files and automatically collects those parts that have changed.

Let’s add a new command to the package.json:

{

  “scripts”: {

    “build”: “webpack”,

    “watch”: “webpack –watch”

  }

}

Copy

Now it’s enough to open the file index.html in the browser and refresh the page after saving the source code files.

For more convenience, you can use the webpack-dev-server package.

Expansion

Webpack is an incredibly powerful tool, primarily due to its extensibility. In the basic case, it only collects several JS files into one, but with the help of loaders and plugins, its functionality can be greatly changed.

Webpack starts its work from the input point — the first JS file. In it, he finds all the imports by which he collects files with the source code of the project. In all the files found, it searches for imports again, and so on until the imports run out. As a result, Webpack has a list of all the project files and information about how these files are related. Then plugins and loaders come into play. For each file, Webpack will find all loaders suitable for configuration and process the file with them.

Plugins are a more global way to change the behavior of the collector. During the build process, Webpack will call a special function in each plugin, passing to it the current build context and the API to change this context.

The downside of Webpack extensibility is the complexity of its configuration. In large projects, the build settings file can take thousands of lines. Often such a configuration is split into several files to make it easier to read.

Loaders

A loader is a function that accepts the contents of a file and should return the modified contents.

For example, ts-loader will turn any TypeScript code into ordinary JavaScript code.

A huge number of loaders have been written for Webpack — for working with styles, with different languages, for image processing and for much more. Here are a few that can be found in almost any project:

style-loader — imports CSS files and implements styles in the DOM.

css-loader — allows you to work with @import and url() inside CSS.

babel-loader — allows you to write code in modern JS, but execute it even in older browsers.

To add a new loader, you need to expand the file webpack.config.js:

Leave a Reply

Your email address will not be published. Required fields are marked *