output.filename
在 Webpack 中，output.filename 配置项用来指定打包后生成的文件名称。它是 Webpack 构建输出目录中的关键部分，决定了生成文件的名字格式。
1. 基本字符串配置
最简单的配置方式是通过字符串设置文件名。比如：
module.exports = {output: {filename: 'bundle.js'}
}
这表示打包后的输出文件将被命名为 bundle.js，并且会输出到配置中 output.path 指定的目录下。
2. 带有占位符的配置
你可以在 filename 字符串中使用占位符，Webpack 会根据构建过程中的特定条件动态替换这些占位符。
常用占位符：
[name]: 输出文件的名称（通常是入口文件的名称）。[id]: 模块的唯一标识符。[hash]: 构建的哈希值，用于实现缓存优化。[chunkhash]: 根据 chunk 的内容生成哈希值（可以用于优化缓存）。[contenthash]: 根据文件的内容生成的哈希值，常用于优化输出文件的缓存。[file]: 文件名（包含扩展名）。
示例：
module.exports = {output: {filename: '[name].[contenthash].js'}
}
这表示输出文件的名字会由入口文件名（例如 main.js）和文件的内容哈希值组成。这样做可以有效避免文件内容不变时浏览器缓存问题。
3. 多入口文件的配置
如果有多个入口文件，那么 filename 中的 [name] 占位符将根据不同的入口名称生成不同的输出文件名。
例如，如果配置有两个入口 main 和 vendor，输出文件会分别命名为 main.js 和 vendor.js。
module.exports = {entry: {main: './src/main.js',vendor: './src/vendor.js'},output: {filename: '[name].[contenthash].js'}
}
这样，Webpack 会生成两个输出文件：main.[contenthash].js 和 vendor.[contenthash].js。
4. 输出目录配置
除了 filename 外，output.path 配置项也决定了文件保存的路径。可以结合 filename 配置来指定输出目录。
示例：
module.exports = {output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[contenthash].js'}
}
这表示 Webpack 会将打包后的文件输出到 dist 目录，并且每个文件会有基于入口文件的名字和内容哈希的命名。
5. 动态文件名
output.filename 也可以是一个函数，通过动态计算生成文件名。
示例：
module.exports = {output: {filename: (chunkData) => {// 根据 chunkData 可以自定义文件名if (chunkData.chunk.name === 'main') {return 'main.bundle.js';}return '[name].[hash].js';}}
}
在这个例子中，filename 是一个函数，它根据 chunkData.chunk.name 动态确定输出文件的名称。
总结
output.filename是 Webpack 配置中用于指定打包输出文件的名称。- 它支持占位符，可以动态生成文件名。
- 可以用于多入口文件的构建，通过
[name]等占位符来生成不同的输出文件名。 - 结合
output.path来控制输出文件的保存路径。
