配置output.filename

参数

string function

此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。

对于单个 入口 起点，filename 会是一个静态名称

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

然而，当通过多个入口起点(entry point)、代码拆分(code splitting)或各种插件(plugin)创建多个 bundle，应该使用以下一种替换方式，来赋予每个 bundle 一个唯一的名称…

使用入口名称：

module.exports = {
  //...
  output: {
    filename: '[name].bundle.js'
  }
};

使用内部 chunk id

module.exports = {
  //...
  output: {
    filename: '[id].bundle.js'
  }
};

使用每次构建过程中，唯一的 hash 生成

module.exports = {
  //...
  output: {
    filename: '[name].[hash].bundle.js'
  }
};

使用基于每个 chunk 内容的 hash:

module.exports = {
  //...
  output: {
    filename: '[chunkhash].bundle.js'
  }
};

请确保已阅读过指南 - 缓存的详细信息。这里涉及更多步骤，不仅仅是设置此选项。

注意此选项被称为文件名，但是你还可以使用像 js/[name]/bundle.js 这样的文件夹结构。

扫描二维码关注公众号，回复： 5099816 查看本文章

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

可以使用以下替换模版字符串（通过 webpack 内部的TemplatedPathPlugin）:

模板	描述
[hash]	模块标识符(module identifier)的 hash
[chunkhash]	chunk 内容的 hash
[name]	模块名称
[id]	模块标识符(module identifier)
[query]	模块的 query，例如，文件名`?`后面的字符串

[hash] 和 [chunkhash] 的长度可以使用 [hash:16]（默认为20）来指定。或者，通过指定output.hashDigestLength 在全局配置长度。

如果将这个选项设为一个函数，函数将返回一个包含上面表格中替换信息的对象。

在使用 ExtractTextWebpackPlugin 时，可以用 [contenthash] 来获取提取文件的 hash（既不是 [hash] 也不是 [chunkhash]）。