What is Output — Webpack 5
Tags: webpack, javascript, react, angular
Published: 2021-05-02 15:27:20

**Before continuing the article, please refer to the below link if you have missed the introduction to webpack 5**

[https://dev.to/yadhus/introduction-to-webpack-5-5fhm](https://dev.to/yadhus/introduction-to-webpack-5-5fhm)

[https://dev.to/yadhus/what-is-entry-webpack-5-1cb5](https://dev.to/yadhus/what-is-entry-webpack-5-1cb5)


#**What is Output**#
Output is a property that tells webpack where to emit / save the bundles it creates and how to name these bundled files. By default the main output file gets stored in `./dist/main.js` and other generated files are stored in `./dist`.

```javascript
module.exports = {
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js
 }
}
```

###**Single or Multi-main entry points**###
Though the [entry property](https://dev.to/yadhus/what-is-entry-webpack-5-1cb5) can have one or multi paths, there can be only one output configuration specified.

####Example:####
```javascript
module.exports = {
 mode: "development",
 entry: "./src/home.js"
}
```
####Output:####
```
dist /
 - main.js
```

####Note:####
The webpack’s default configuration for the output property looks something like this
```javascript
module.exports = {
 mode: "development",
 entry: "./src/home.js"

 // default output configuration
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js
 }
}
```
The `[name]` resolves to the dynamic name of the bundle. Here it resolves to `main.js`.

If you want the default configuration, it is not required to mention the output property. Webpack understands and apply it implicitly.

###**Object entry points**###
While webpack can have multiple different [entry points](https://dev.to/yadhus/what-is-entry-webpack-5-1cb5), only one output configuration can be specified.

####Example:####
```javascript
module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },

 // default output configuration 
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js
 }
}
```
####Output:####
```
dist /
 - adminApp.js
 - homeApp.js
```

#**Advanced**#
Apart from path and filename sub properties of the Output property. There are few other sub properties that are used often in the build process (like [CRA](https://create-react-app.dev/) etc.). Some of them are listed below.

###**PathInfo**###

```javascript
module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js,

  pathInfo: true
 }
}
```
This tells webpack to include comments in bundles with information about the contained modules (filename comments). It also adds some info about [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) to the generated bundle.

###**ChunkFilename**###

```javascript
module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js,

  pathInfo: true, 
  chunkFilename: [id].[contenthash:8].chunk.js
 }
}
```
`contenthash:8` generates a dynamic hash value based on the contents of the files and the ‘`:8`’ represents the length of the hash value. If the contents of the files are not changed, then the same hash value is generated.

The `chunkFilename` determines the name of the non-initial chunk files (like lazy loaded or dynamically imported modules). These filenames need to be generated at runtime to send request for the chunks.

Because of this, placeholders like `[name]` and `[contenthash]` need to add a mapping from chunk id (`[id]`) to placeholder value (`[name].[contenthash:8].chunk.js`) to the output bundle with the webpack runtime. This increases the size and may invalidate the bundle when placeholder value for any chunk changes.

###**PublicPath**###

```javascript
module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js,

  pathInfo: true, 
  chunkFilename: [id].[contenthash:8].chunk.js, 
  publicPath: 'https://server.com/assets/' 
 }
}
```
The `publicPath` is where you have uploaded the bundled files. This is an important option when using on-demand-loading or loading external resources like images, files, etc.

This option specifies the public URL of the output directory when referenced in a browser. A relative URL is resolved relative to the HTML page (or `<base>` tag). Server-relative URLs, protocol-relative URLs or absolute URLs are also possible and sometimes required, i.e. when hosting assets on a CDN.

In the above code snippet, the request to the chunk file will look something like this `https://server.com/assets/1.a345ersd.chunk.js`.

The webpack-dev-server also takes a hint from `publicPath`, using it to determine where to serve the output files from.

By default, the publicPath value is set to ‘/’.

##**GlobalObject**##

```javascript
module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js,

  pathInfo: true, 
  chunkFilename: [id].[contenthash:8].chunk.js, 
  publicPath: 'https://server.com/assets/',
  globalObject: 'this'
 }
}
```
When targeting a library, especially when `libraryTarget` is '`umd`', this option indicates what global object will be used to mount the library.

To make [UMD](https://github.com/umdjs/umd) build available on both browsers and Node.js, set `globalObject` option to '`this`'.

Defaults to `self` / `window` for Web-like targets.

####The webpack configuration file specifically to highlight output property:####

{% gist https://gist.github.com/yadhus/0a3e944a8abbcab99b0bdd95865a1f5c %}

##**GitHub Repo Link**##
[https://github.com/yadhus/What-is-Output-Webpack-5](https://github.com/yadhus/What-is-Output-Webpack-5)

##**References**##
[https://webpack.js.org/configuration/output/](https://webpack.js.org/configuration/output/)
[https://webpack.js.org/concepts/#output](https://webpack.js.org/concepts/#output)