vue自定义loader运行报错?-灵析社区

HAO起起

写了个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(/([\s\S]*?)/); let restContent = content if (templateMatch) { const templateContent = templateMatch[1]; restContent = content.replace(/[\s\S]*?/, ''); let returnContent = templateContent.replace(/]*)>/g // tmp let contentArr = returnContent.split('\n') let resultArr = contentArr.map((item, index) => { if (regInput.test(item)) { item = item.replace(/ ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 百思不得其解,不知道各位能不能不能帮忙指点迷津。项目代码已上传到[github](https://link.segmentfault.com/?enc=0iPdGJ6nS%2BmC%2F3aF0eNDGQ%3D%3D.RJaE94FMLmhaumqny45Bl8H8MDUH1HVxWAo7TFCOz7%2F9WBoIPNX2Ms9Uncld%2FvJy) 看过相关文章,暂时不清楚具体原因

阅读量:166

点赞量:0

问AI
代码微调了下,不报错了 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(/]*)>/g // tmp let contentArr = returnContent.split('\n') let resultArr = contentArr.map((item, index) => { if (regInput.test(item)) { item = item.replace(/