output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件，简单点说就是指定打包产物的名称和输出的路径，一个最基本的例子如下

1
2
3
4
5
6
7
8
9
10
/* webpack.config.js */
const path = require('path')

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

上述代码配置了打包产物的名称为output.js，输出路径为dist目录

我们知道在entry是多入口或者使用代码拆分(code splitting)功能时，会输出多个bundle，但是对于output来说，只能设置一个出口，因此在output的filename字段中需要使用占位符(substitutions)来输出不同名称的bundle，示例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 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'
  }
}

上文中我们提到了占位符的概念，在webpack里有如下类型占位符

[hash]，[contenthash] 或者 [chunkhash] 的长度可以使用 [hash:16]（默认为 20）来指定。或者，通过指定output.hashDigestLength 在全局配置长度。当你要在实际文件名中使用占位符时，webpack 会过滤出需要替换的占位符。例如，输出一个文件 [name].js， 你必须通过在括号之间添加反斜杠来转义[name]占位符。 因此，[\name] 生成 [name] 而不是 name。

注意，此选项不会影响那些「按需加载 chunk」的输出文件。它只影响最初加载的输出文件。对于按需加载的 chunk 文件，请使用 output.chunkFilename 选项来控制输出。通过 loader 创建的文件也不受影响。在这种情况下，你必须尝试 loader 特定的可用选项。

值得注意的是在webpack5里新增了clean字段，替代了在webpack4里的clean-webpack-plugin,可以让我们更方便地去清除输出目录