This content originally appeared on DEV Community and was authored by Yadhunandan S
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
This content originally appeared on DEV Community and was authored by Yadhunandan S
Yadhunandan S | Sciencx (2021-05-02T15:27:20+00:00) What is Output — Webpack 5. Retrieved from https://www.scien.cx/2021/05/02/what-is-output-webpack-5/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.