创建 vm-parse-loader

date
May 6, 2021
slug
velocity-parse-loader
status
Published
tags
Webpack
SSR
summary
使用 webpack 以及 mock 数据本地调试 java velocity 模版
type
Post
因为前后端未分离，使用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
        }
      }
    ]
}
  1. basePath 指与 src 同级的目录
  1. 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 删除注释

© i7eo 2017 - 2024