因为前后端未分离,使用java velocity 开发页面,为了提高效率,提高联调效率。编写 webapck loader 模拟后端渲染流程,前端本地利用mock数据开发
{
test: /\\.vm$/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src', 'audio:src'],
minimize: false
}
},
{
loader: path.resolve(__dirname, 'vm-parse-loader'),
options: {
basePath: path.join(__dirname, '../'),
removeComments: !isDev
}
}
]
}
basePath
指与 src 同级的目录removeComments
是否删除注释 default: true建议与 vm-data-loader 一起使用更香
一起使用的时候请注意: vm-parse-loader 必须在 vm-data-loader 之前避免#parse被吃掉
{
test: /\\.vm$/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src', 'audio:src'],
minimize: false
}
},
{
loader: path.resolve(__dirname, 'vm-data-loader'),
options: {
dataPath: `./backend-data.json`
}
},
{
loader: path.resolve(__dirname, 'vm-parse-loader'),
options: {
basePath: path.join(__dirname, '../'),
removeComments: !isDev
}
}
]
}
dataPath 是 mock 后传给模版的json数据
利用 velocityjs 处理 #parse
删除注释