webpack配置之---output.filename

output.filename

在 Webpack 中，output.filename 配置项用来指定打包后生成的文件名称。它是 Webpack 构建输出目录中的关键部分，决定了生成文件的名字格式。

1. 基本字符串配置

最简单的配置方式是通过字符串设置文件名。比如：

javascript 复制代码

module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

这表示打包后的输出文件将被命名为 bundle.js，并且会输出到配置中 output.path 指定的目录下。

2. 带有占位符的配置

你可以在 filename 字符串中使用占位符，Webpack 会根据构建过程中的特定条件动态替换这些占位符。

常用占位符：

[name]: 输出文件的名称（通常是入口文件的名称）。
[id]: 模块的唯一标识符。
[hash]: 构建的哈希值，用于实现缓存优化。
[chunkhash]: 根据 chunk 的内容生成哈希值（可以用于优化缓存）。
[contenthash]: 根据文件的内容生成的哈希值，常用于优化输出文件的缓存。
[file]: 文件名（包含扩展名）。

示例：

javascript 复制代码

module.exports = {
  output: {
    filename: '[name].[contenthash].js'
  }
}

这表示输出文件的名字会由入口文件名（例如 main.js）和文件的内容哈希值组成。这样做可以有效避免文件内容不变时浏览器缓存问题。

3. 多入口文件的配置

如果有多个入口文件，那么 filename 中的 [name] 占位符将根据不同的入口名称生成不同的输出文件名。

例如，如果配置有两个入口 main 和 vendor，输出文件会分别命名为 main.js 和 vendor.js。

javascript 复制代码

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 配置来指定输出目录。

示例：

javascript 复制代码

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

这表示 Webpack 会将打包后的文件输出到 dist 目录，并且每个文件会有基于入口文件的名字和内容哈希的命名。

5. 动态文件名

output.filename 也可以是一个函数，通过动态计算生成文件名。

示例：

javascript 复制代码

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 来控制输出文件的保存路径。