X

Sections

Get StartedContribute

Introduction

Edit this Page  

webpack is a module bundler for modern JavaScript applications. It is incredibly configurable, however, there are 4 Core Concepts we feel you should understand before you get started!

As part of your webpack learning journey, we wrote this document aimed to give you a high-level overview of these concepts, while still providing links to concept specific use-cases.

Entry

In the previous article, we mentioned that webpack creates a graph of all of your application's dependencies. The starting point of this graph is known as an entry point. The Entry point tells webpack where to start and follows the graph of dependendencies to know what to bundle. You can think of your applications entry point as the contextual root or the first file to kick off your app.

In webpack we define entry points using the entry property in our webpack configuration object.

The simplest example is seen below:

webpack.config.js

module.exports = config;

const config = {
  entry: './path/to/my/entry/file.js'
};

There are multiple ways to declare your entry property that are specific to your applications needs.

Learn more!

Output

Once you've bundled all of your assets together, we still need to tell webpack where to bundle our application. The webpack output property describes to webpack how to treat bundled code.

webpack.config.js

module.exports = config;

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: './dist'
  }
};

In the example above, through the output.filename and output.path properties we are describing to webpack the name of our bundle, and where we want it to be emitted to.

tip
You may see the term emitted or emit used throughout our documentation and plugin API. This is a fancy term for "produced or discharged".

The output property has many more configurable features, but lets spend some time understanding some of the most common use cases for the output property.

Learn more!

Loaders

The goal is to have all of your assets in your project to be webpack's concern and not the browser. (This doesn't mean that they all have to be bundled together). webpack treats every file (.css, .html, .scss, .jpg, etc.) as a module. However, webpack only understands JavaScript.

Loaders tell webpack how to treat these files as modules as they are added to your dependency graph.

At a high level, they have two purposes in your webpack config.

  1. Identify what files should be transformed by a certain loader. (test property)
  2. Transform that file so that it can be added to your dependency graph (and eventually your bundle). (loader property)

webpack.config.js

module.exports = config;

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: './dist'
  },
  module: {
    loaders: [
      {test: /\.(js|jsx)$/, loader: 'babel-loader'}
    ]
  }
};

In the configuration above we have defined our loader with its two required properties: test, and loader. It tells webpack's compiler the following:

"Hey webpack compiler, when you come across a path that resolves to a '.js' or '.jsx' file inside of a require() statement, use the babel-loader to transform it before you bundle it together".

warning
It is important to remember when defining loaders in your webpack config, you are defining them under module.loaders, and not loaders.

There are more specific properties to define on loaders that we haven't yet covered.

Learn more!

Plugins

Since Loaders only execute transforms on a per-file basis, Plugins are most commonly used (but not limited to) performing actions and custom functionality on "compilations" or "chunks" of your bundled modules (and so much more). The webpack Plugin system is extremely and powerful and customizable.

In order to use a plugin, you just need to require() it and add it to the plugins array. Since most plugins are customizable via options, you need to create an instance of it by calling it with new.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = config;

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: './dist'
  },
  module: {
    loaders: [
      {test: /\.(js|jsx)$/, loader: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

There are many plugins that webpack provides out of the box! Check out our list of plugins for more information.

Using plugins in your webpack config is straight-forward, however there are many use-cases that are worth discussing further.

Learn more!


Contributors:

Contributor to this page