Concepts

Now before that, what is webpack and what is it being used for.

webpack is a static module bundler for modern JavaScript applications

When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combine every module of your project into one or more bundles, which are static assets to serve your content from.

Modules

Each module, has a smaller surface area than a full program, making verification, debugging and testing trivial

Webpack modules can express their dependencies in a variety of ways

1. an ES2015 import statement

2. CommonJS require statement

3. AMD define and require statement

4. @import statement inside a css/scss/less file

5. an image url in a stylesheet url(...) or HTML <img src=...> file

Modules support

Webpack supports the following modules types natively

• ECMAScript modules

• CommonJS modules

• AMD modules

• Assets

• WebAssembly modules

In addition to that, webpack supports modules written in a variety of languages and preprocessors via loaders.

These loaders describe to webpack how to process non-native modules and include these dependencies into your bundles.

To create custom loaders -> webpack.js.org/api/loaders/

Entry

An entry point indicates which module webpack should use to begin building out its internal dependency graph. Webpack will figure out which other modules and libraries that entry point depends on.

By default, its value is ./src/index.js, but you can also specify multiple entry points by setting an entry property in the webpack configuration.

module.exports = {
	entry: './src/index.js'
}

module.exports = {
	entry: {
		home: "./src/home.js",
		contact: "./src/contact.js"
	}
}

Single entry syntax is great choice when you are looking to quickly set up a webpack configuration for an application or tool with one entry. However, there is not much flexibility given in extending or scaling your configuration with this syntax

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

Syntax

1. Single Entry syntax

   1. entry: string | [string]

2. Object syntax

   1. entry: { <chunkName>: string | [string]