Concepts

At its core,webpack is astatic module bundler for modern JavaScript applications. When webpack processes your application, it internally builds adependency graph from one or moreentry points and then combines every module your project needs into one or morebundles, which are static assets to serve your content from.

tip

Learn more about JavaScript modules and webpack modules here.

Since version 4.0.0,webpack does not require a configuration file to bundle your project. Nevertheless, it isincredibly configurable to better fit your needs.

To get started you only need to understand itsCore Concepts:

This document is intended to give ahigh-level overview of these concepts, while providing links to detailed concept-specific use cases.

For a better understanding of the ideas behind module bundlers and how they work under the hood, consult these resources:

Entry

Anentry point indicates which module webpack should use to begin building out its internaldependency graph. Webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

By default its value is./src/index.js, but you can specify a different (or multiple) entry points by setting anentry property in the webpack configuration. For example:

webpack.config.js

module.exports={  entry:'./path/to/my/entry/file.js',};

tip

Learn more in the entry points section.

Output

Theoutput property tells webpack where to emit thebundles it creates and how to name these files. It defaults to./dist/main.js for the main output file and to the./dist folder for any other generated file.

You can configure this part of the process by specifying anoutput field in your configuration:

webpack.config.js

const path=require('path');module.exports={  entry:'./path/to/my/entry/file.js',  output:{    path: path.resolve(__dirname,'dist'),    filename:'my-first-webpack.bundle.js',},};

In the example above, we use theoutput.filename and theoutput.path properties to tell webpack the name of our bundle and where we want it to be emitted to. In case you're wondering about the path module being imported at the top, it is a coreNode.js module that gets used to manipulate file paths.

tip

Theoutput property has many more configurable features. If you want to learn about the concepts behind it, you canread more in the output section.

Loaders

Out of the box, webpack only understands JavaScript and JSON files.Loaders allow webpack to process other types of files and convert them into validmodules that can be consumed by your application and added to the dependency graph.

warning

One of webpack's specific features is the ability toimport any type of module, e.g..css files, which may not be supported by other bundlers or task runners. We feel this extension of the language is warranted as it allows developers to build a more accurate dependency graph.

At a high level,loaders have two properties in your webpack configuration:

Thetest property identifies which file or files should be transformed.
Theuse property indicates which loader should be used to do the transforming.

webpack.config.js

const path=require('path');module.exports={  output:{    filename:'my-first-webpack.bundle.js',},  module:{    rules:[{ test:/\.txt$/, use:'raw-loader'}],},};

The configuration above has defined arules property for a single module with two required properties:test anduse. This tells webpack's compiler the following:

"Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of arequire()/import statement,use theraw-loader to transform it before you add it to the bundle."

warning

It is important to remember that when defining rules in your webpack config, you are defining them undermodule.rules and notrules. For your benefit, webpack will warn you if this is done incorrectly.

warning

Keep in mind that when using regex to match files, you may not quote it. i.e/\.txt$/ is not the same as'/\.txt$/' or"/\.txt$/". The former instructs webpack to match any file that ends with .txt and the latter instructs webpack to match a single file with an absolute path '.txt'; this is likely not your intention.

You can check further customization when including loaders in the loaders section.

Plugins

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

tip

Check out the plugin interface and how to use it to extend webpack's capabilities.

In order to use a plugin, you need torequire() it and add it to theplugins array. Most plugins are customizable through options. Since you can use a plugin multiple times in a configuration for different purposes, you need to create an instance of it by calling it with thenew operator.

webpack.config.js

const HtmlWebpackPlugin=require('html-webpack-plugin');const webpack=require('webpack');//to access built-in pluginsmodule.exports={  module:{    rules:[{ test:/\.txt$/, use:'raw-loader'}],},  plugins:[newHtmlWebpackPlugin({ template:'./src/index.html'})],};

In the example above, thehtml-webpack-plugin generates an HTML file for your application and automatically injects all your generated bundles into this file.

tip

There are many plugins that webpack provides out of the box! Check out the list of plugins.

Using plugins in your webpack configuration is straightforward. However, there are many use cases that are worth further exploration.Learn more about them here.

Mode

By setting themode parameter to eitherdevelopment,production ornone, you can enable webpack's built-in optimizations that correspond to each environment. The default value isproduction.

module.exports={  mode:'production',};

Learn more about themode configuration here and what optimizations take place on each value.

Browser Compatibility

Webpack supports all browsers that areES5-compliant (IE8 and below are not supported). Webpack needsPromise forimport() andrequire.ensure(). If you want to support older browsers, you will need toload a polyfill before using these expressions.