What is Output — Webpack 5

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/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.

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

Single or Multi-main entry points

Though the entry property can have one or multi paths, there can be only one output configuration specified.

Example:

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

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, only one output configuration can be specified.

Example:

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 etc.). Some of them are listed below.

PathInfo

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 to the generated bundle.

ChunkFilename

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

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

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 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:

GitHub Repo Link

https://github.com/yadhus/What-is-Output-Webpack-5

References

https://webpack.js.org/configuration/output/
https://webpack.js.org/concepts/#output