This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The Output attribute tells WebPack where to export the bundles it creates and how to name those files. In a nutshell, it specifies the name of the bundle and the path to the output. A basic example is as follows

  /* webpack.config.js */
  const path = require('path')

  module.exports = {
    entry: './src/entry.js'.output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'output.js'}}Copy the code

The code above configates the packaged product to be named output.js and the output path to the dist directory

We know that multiple bundles can be output when entry is multi-entry or code splitting is used, but only one exit can be set for output. Therefore, in the filename field of output, one needs to use substitutions for the output of bundles with different names, as shown in the following example

  /* webpack.config.js */
  const path = require('path')

  module.exports = {
    entry: {entry1: './src/entry1.js'.entry2: './src/entry2.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'output.[name].js'}}Copy the code

We mentioned the concept of placeholders above, and there are placeholders of the following type in Webpack

  • [fullHash]:compilation Hash value
  • [id]: indicates the ID of the internal chunk
  • [contenthash]: Hash generated by the generated content
  • [chunkhash]: hash value of chunk, containing all elements of the chunk

The length of [hash], [contenthash] or [chunkhash] can be specified using [hash:16] (default: 20). Alternatively, configure the length globally by specifying output.hashDigestLength. When you use placeholders in the actual filename, Webpack filters out the placeholders that need to be replaced. For example, to output a file [name].js, you must escape the [name] placeholder by adding backslashes between parentheses. Therefore, [\name] produces [name] instead of name.

Note that this option does not affect output files that load Chunk on demand. It only affects the output file that was originally loaded. For chunk files loaded on demand, use the output.chunkfilename option to control the output. Files created by the Loader are not affected. In this case, you must try loader specific options available.

It is worth noting that the clean field has been added to Webpack5, replacing the clean-webpack-plugin in WebPack4 to make it easier to clean the output directory

conclusion

There are many configuration items for output, which need to be used continuously in practice to truly understand, so we still have to refuel!