配置output.filename
原谅链接: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
这样的文件夹结构。
注意,此选项不会影响那些「按需加载 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]
)。