false用来控制是否用 <style> 标签将产物中的 style 文件(.css 文件)inline 到 HTML 中。
注意,如果开启了这个选项,那么 style 文件将不会被写入产物目录中,而只会以 inline 样式的形式存在于 HTML 文件中。
默认情况下,我们有这样的产物文件:
开启 output.inlineStyles 选项后:
生产构建的产物文件将变成:
同时,dist/static/css/style.css 文件将被 inline 到 index.html 中:
设置 inlineStyles: true,等价于将 inlineStyles.enable 设置为 'auto',这表示仅在生产模式时开启内联。
当你需要内联产物中的一部分 CSS 文件时,你可以将 inlineStyles 设置为一个正则表达式,匹配需要内联的 CSS 文件的 URL。
比如,将产物中的 main.css 内联到 HTML 中,你可以添加如下配置:
生产模式的文件名中默认包含了一个 hash 值,比如 static/css/main.18a568e5.css。因此,在正则表达式中需要通过 \w+ 来匹配 hash。
你也可以将 output.inlineStyles 设置为一个函数,函数接收以下参数:
name:文件名,比如 static/css/main.18a568e5.css。size:文件大小,单位为 byte。比如,我们希望内联小于 10kB 的资源,可以添加如下配置:
'auto' | booleanfalse是否启用内联。'auto' 表示在生产模式时开启,开发模式时关闭。
RegExp | ((params: { size: number; name: string }) => boolean)用来匹配需要内联的 CSS 文件。