vue.js - vue自定义loader运行报错？

Question

写了个loader想对vue单文件的template预先做些处理，不过运行起来会有报错

vue.config.js

const { defineConfig } = require('@vue/cli-service')const path = require('path')// const { VueLoaderPlugin } = require('vue-loader')module.exports = defineConfig({  transpileDependencies: true,  chainWebpack: config => {       config.module      .rule('vue')      // .test(/\.vue$/)      .use('vue-loader')      .loader('vue-loader')      .end()      .use('my-loader')      .loader(path.resolve(__dirname, './my-loader.js'))      // .before('vue-loader')      .end()  }})

my-loader.js

module.exports = function (content) {  const templateMatch = content.match(/<template>([\s\S]*?)<\/template>/);  let restContent = content  if (templateMatch) {    const templateContent = templateMatch[1];    restContent = content.replace(/<template>[\s\S]*?<\/template>/, '');        let returnContent = templateContent.replace(/<\/el-/g, '\n</el-')    returnContent = returnContent.replace(/<el-/g, '\n<el-')    returnContent = returnContent.replace(/<input/g, '\n<input')    var regInput = /<(input)([^<>]*)>/g // tmp    let contentArr = returnContent.split('\n')    let resultArr = contentArr.map((item, index) => {      if (regInput.test(item)) {        item = item.replace(/<input/g, '<input name="input_name"')      }      return item    })    const result = resultArr.join('\n')    console.log('result', result)    // return result    return `module.exports = ${JSON.stringify(result + restContent)};`    // this.callback(null, result)    // return  } else {    // return content;    return `module.exports = ${JSON.stringify(content)};`    // this.callback(null, content)    // return  }}

自定义的loader只是在vue-loader前处理一下template，之后的处理应该会交给vue-loader继续执行。不过实际运行起来，vue单文件的js跟css都会有错误。

ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css

百思不得其解，不知道各位能不能不能帮忙指点迷津。项目代码已上传到github

看过相关文章，暂时不清楚具体原因

Answer 1

代码微调了下，不报错了
1、自定义的loader要在vue-loader之前
2、loader的链式处理依赖了一个执行顺序，要确保经过所有的loader之后生成一个带module.exports 的js字符串代码文件；自定义的loader只是中间过程，直接返回内容交给vue-loader处理，不需要module.exports

const { defineConfig } = require('@vue/cli-service')const path = require('path')// const { VueLoaderPlugin } = require('vue-loader')module.exports = defineConfig({  transpileDependencies: true,  chainWebpack: config => {       config.module      .rule('vue')      // .test(/\.vue$/)      .use('vue-loader')      .loader('vue-loader')      .end()      .use('my-loader')      .loader(path.resolve(__dirname, './my-loader.js'))      .before('vue-loader')      .end()  }})

const fs = require('fs');const path = require('path');module.exports = function (content) {  var output = ''  var moudle = this.resource.split('\\src\\')[1]  console.log(moudle)  var dir = moudle.replace(/[?&=]/g, '_')  var type = 'js'  if (moudle.includes('type=style')) {    type = 'css'  }  if (moudle.includes('type=template')) {    type = 'html'  }  if (type == 'html') {    let returnContent = content.replace(/<\/el-/g, '\n</el-')    returnContent = returnContent.replace(/<el-/g, '\n<el-')    returnContent = returnContent.replace(/<input/g, '\n<input')    var regInput = /<(input)([^<>]*)>/g // tmp    let contentArr = returnContent.split('\n')    let resultArr = contentArr.map((item, index) => {      if (regInput.test(item)) {        item = item.replace(/<input/g, '<input name="input_name"')      }      return item    })    const result = resultArr.join('\n')    output = result        createDirAndWriteFile(`.output/${dir}已处理`, `old.${type}`, content);    createDirAndWriteFile(`.output/${dir}已处理`, `new.${type}`, output);  } else {    output = content;    createDirAndWriteFile(`.output/${dir}未处理`, `old.${type}`, content);    createDirAndWriteFile(`.output/${dir}未处理`, `new.${type}`, output);    // for (const key in this) {    //   if (Object.hasOwnProperty.call(this, key)) {    //     const element = this[key];    //     try {    //       if (typeof element == 'object') {    //         createDirAndWriteFile(`.output/${dir}未处理`, `${key}.json`, JSON.stringify(element, null, 2));    //       } else {    //         createDirAndWriteFile(`.output/${dir}未处理`, `${key}.txt`, element);    //       }              //     } catch (error) {    //     }    //   }    // }  }  return output}function createDirAndWriteFile(dirPath, fileName, content) {  // 创建目录    if (!fs.existsSync(dirPath)) {    fs.mkdirSync(dirPath, { recursive: true });  }  // 拼接文件路径    const filePath = path.join(dirPath, fileName);  // 写入文件    fs.writeFileSync(filePath, content);}