1.0.0 • Published 4 years ago
css-webp-plugin v1.0.0
生成支持webp相关的css和template,修改runtime中的css地址
- webpack, 生成相关的css文件
const CssWebpWebpackPlugin = require('@vp/css-webp-plugin/webpack')
webpackConfig.plugins.push(new CssWebpWebpackPlugin({
template: paths.viewHtmlFile, // template路径
webpfix: 'x-oss-process=image/format,webp', //阿里OSS webp格式
postfix: '_webp' // template文件后缀
}))
- server 渲染时使用新的css
const getRenderParams = require('css-webp-plugin/server').getRenderParams
/*
* 获取渲染相关的参数(模版名、引入的js、css)
* 参数:
* options 渲染需要的参数
* template 模版名,'client'
* scriptTags @loadable/server 获取的extractor.scriptTags()
* styleTags @loadable/server 获取的extractor.styleTags()
* webp 浏览器是否支持webp, 默认false
* postfix template文件后缀, 默认'_webp'
* return {template, scriptTags, styleTags}
*/
const params = getRenderParams( options = {template, scriptTags, styleTags}, webp, postfix = '_webp')
ctx.render(params.template, {
scriptTags: params.scriptTags,
styleTags: params.styleTags,
...
})