一个 Vue.js Vue-router Vuex element 项目
# install dependencies
yarn install
# serve with hot reload at localhost:8080
yarn run dev
# build for production with minification
yarn run build修改webpack配置
webpack.base.conf.js
var multi = require("multi-loader")
...
{
test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
loader: multi(
'file?' + JSON.stringify({
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].webp')
}) + '!webpn',
'url?' + JSON.stringify({
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
})
)
},
...在mian.js中引用vue-webp指令
import VueWebp from 'vue-webp';
Vue.use(VueWebp)在pug中只用webp
img(v-webp="require('./images/b1.jpg')")
// 这里的图片资源需要使用require ，下一步进行优化