因为前后端未分离，使用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 同级的目录
2. 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 删除注释